Style issues with fullcalendar 2 - jquery-ui

I have just upgraded to fullcalendar 2 and am now facing some styling issues that I can't seem to rectify. The calendar appears on http://horntonprimaryschool.co.uk/calendar/ and is using a jQuery UI theme.
When events are present it causes the border to be missing on the td's for that week, the current day background is also cut off if no event exists on that day

Not a complete answer as I'm not sure what the exact css conflict is but the problem is related to foundation.css conflicting with fullcalendar css. I have reverted back to fullcalendar v1.5.4 which works.

Related

Autocomplete and jeditable-datepicker not working together in Jeditable

I am using jeditable and i needed to integrate with jeditable-datepicker and Autocomplete
everything works fine apart from this incompatibility between them.
I have noticed that the problem is caused by the script
<script src="jquery-ui-1.8.24.custom.min.js"></script>
which makes working my jQuery datepicker, if i remove it the autocomplete starts working again but obviously my Jquery date picker stops working.
How can i figure it out my issue? there is a way to make them working together?
Thanks
i found the solution, i explain it here, it might be useful for someone in the future.
i have downloaded again the custom jQuery , i have deselected all the options just keeping the Datepicker Widget and then pasted the new script in my page and the incompatibility was gone!

jquery mobiscroll and jquery validate won't play nice together

i'm working on a jquery mobile web site. and am trying to use the mobiscroll plugin for the date picker.
I'm using jquery validate plugin for my validation. I've used this all over other projects with no problems at all.
The issue is, the mobiscroll modal popup comes up, and the set / cancel button works fine, but the scrolling and/or +/- buttons do not function.
firebug isn't showing any errors, and IE Developer tools script debugger doesn't either.
If i take the jquery Validate reference out, it works fine. removing the $('form').validate(); does NOT fix it.
for reference i'm using:
jquery 1.7.1
jquery mobile 1.1.0
jquery validate 1.6
mobiscroll 1.6 or 2rc2 (both have the issue)
How i have mobiscroll configured doesn't seem to matter, leaving all the options out, or setting some doesn't seem to make a difference.
Having other inputs with or without validation on them doesn't make a difference either.
Here is my setup code:
$('#DateVolunteered').scroller(
{
preset: 'date',
theme: 'default',
display: 'modal',
mode: 'scroller'
}
);
and the input:
I tried making a jsFiddle, but am having some issues with getting the various libraries referenced and all the css and whatnot. I will keep working on it and post a link when i get it up and running.
EDIT:
I can't get a fiddle to work. BUT I have discovered that updating to 1.9 fixes it. very strange. but i'll take it
updating to jquery validate 1.9 fixed it.

jquery datepicker on windows phone not selecting the date

When selecting the date in the standard JQuery datepicker on a Windows 7 phone i found that the date doesn't select for me and the field doesn't fill in the date. This feature works on all other tested devices including (of course the standard desktop) iTouch, iPad and Android. It almost acts like the dom object is not triggering when the datepicker is selected sometimes causing a text field behind the control to take focus. I did manage to get the timepicker (http://fgelinas.com/code/timepicker/) work but not the datepicker.
Has anyone experienced this and found a fix? Thanks in advance for your help!
DateBox has a ton of options and it's built for jQM:
http://dev.jtsage.com/jQM-DateBox/
try to use this line of code :
document.getElementById('container div of datepicker').innerHTML = document.getElementById('container div of datepicker').innerHTML
it seems like crazy and unbeliveable but it works with me

How do I themeroll jGrowl

I am working on building a site and i'm trying to use jquery ui themes for as much of the styling as possible. and the jGrowl site says it can be theme rolled.
from the site:
Changes in 1.2.2
Notification can now be theme rolled for jQuery UI, special thanks to Jeff Chan!
there isn't really any explanation as to how and i searched far and wide for an explanation to no avail.
You do not need to do anything, simply include the jquery-ui css. There are example files included for different themes in the download

How do I get JQuery UI themes to show up in CakePHP? [duplicate]

This question already has answers here:
jQuery-UI Datepicker CSS problem
(4 answers)
Closed 3 years ago.
I'm having problem showing JQuery UI themes for my CakePHP application. I placed the theme at app/webroot/lib/jquery.ui/ . Now on my layout I imported the theme using :
echo $html->css('/lib/jquery-ui/theme/ui.all');
I'm usingthe DatePicker widget. On my page, I can see that the my textbox was showing the date picker when focused, but the theme was not applied properly. I can't see the background images. I know that the theme (or css) has been imported since I can see some changes in the DatePicker (fonts, spacings, etc.). I just couldn't see the background images.
I don't know if this has something to do with my problem, but I'm also using YUI.
I take it your ui.all.css file lives in app/webroot/css/lib/jquery-ui/theme/ ?
Where are the images that it references?
URLs for background images in CSS files should be relative to the CSS file itself - so if the images live in app/webroot/img/lib/jquery-ui/theme/, the URLs in the CSS file should be ../../../../img/lib/jquery-ui/theme/ or alternatively, the URLs can be absolute from the DocRoot of the site, e.g. /img/lib/jquery-ui/theme/
Just to add a little bit more clarification:
I have been using the jquery ui datepicker for several projects and it always worked great. Then I baked a new cake project, dropped in datepicker, and found that the background images were not loading. I removed cake.generic.css from my application, and the datepicker images were able to load! Add it back in, and they vanish!
So long as you use your own form css for your apps, you should be fine.
you said you have the files at app/webroot/lib/jquery.ui/
so you should use the correct path:
echo $html->css('/lib/jquery.ui/theme/ui.all');

Resources