Menu icon Foundation
Fullcalendar conflict

I have just installed foundation into a rails project, that was already using fullcalendar which can be found at www.fullcalendar.io

After the Foundation install most full calendar elements were obviously affected by the styling in foundation. with several obvious errors occurring. One of which is the todays date box shading only covering the bottom half of the box, the other is the hover-state of the buttons now has a random blue bar that rises to cover the bottom half of the button.

Ideally i would like foundation to have no affect on Fullcalendar whatsoever, Is there a way to achieve this? otherwise, any advice on dealing with the obvious bugs? Perhaps i need to include only the parts of the foundation scss framework that are necessary to me, but i have not managed to get that to work yet.

Thanks

fullcalendarconflictscss

I have just installed foundation into a rails project, that was already using fullcalendar which can be found at www.fullcalendar.io

After the Foundation install most full calendar elements were obviously affected by the styling in foundation. with several obvious errors occurring. One of which is the todays date box shading only covering the bottom half of the box, the other is the hover-state of the buttons now has a random blue bar that rises to cover the bottom half of the button.

Ideally i would like foundation to have no affect on Fullcalendar whatsoever, Is there a way to achieve this? otherwise, any advice on dealing with the obvious bugs? Perhaps i need to include only the parts of the foundation scss framework that are necessary to me, but i have not managed to get that to work yet.

Thanks

Tim Hartwick about 4 years ago

You can pick and choose what components from foundation are included in your settings file. Check out the section "_app.scss" here: http://foundation.zurb.com/docs/using-sass.html

Basically you need to comment out (or delete) line 2: "@import: 'foundaiton'"
Then you can start picking only the things you use on your project.

Looks like fullcalendar uses a lot of tables, so I might avoid that component.

Hope this helps!

John Winters over 2 years ago

Slightly late response I know, but I was bitten by the same problem and it might be useful to record the resolution.

 

The above problem arises because Foundation re-defines the working of the standard <button> component.  If you miss out Foundation's buttons element then the problem goes away.


There are also clashes (which produced different problems) caused by Foundation re-defining <table> components, so you need to miss that one out too.

 

Foundation defines a whole lot of attributes for both <button> and the class "button".  This carries a high probability of causing problems.  If instead it just defined its own class called, say, "zf-button" and left the standard <button> alone, the chances of this kind of clash would be reduced.