Tweak jquery responsive calendar

ltpitt
ltpitt used Ask the Experts™
on
I am using this calendar:

http://w3widgets.com/responsive-calendar/

I've installed the example in my webserver:

http://pitto.dyndns.org/calendar

And I've tried to color all the fridays in red.

The documentation is very clear:

http://w3widgets.com/responsive-calendar/#documentation

I know I need a simple jquery selector (you can see what I've tried in js/javascript.js) but I can't manipulate the right class referring to fridays.

I tried:

$(".fri").fadeOut();

Just to check if I could point to fridays... No luck :(

What am I doing wrong?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Expert of the Year 2014
Top Expert 2014
Commented:
Just add a class to your css

.fri {
background:red /* or whatever color */
}

You don't need to use jQuery for this.

Author

Commented:
Thanks for your suggestion but I'd like to change it dynamically...

Why my

$(".fri").css($(".fri").css("backgroundColor", "yellow"));

is not working?
Expert of the Year 2014
Top Expert 2014

Commented:
It should be just

$(".fri").css("backgroundColor", "yellow");
Exploring ASP.NET Core: Fundamentals

Learn to build web apps and services, IoT apps, and mobile backends by covering the fundamentals of ASP.NET Core and  exploring the core foundations for app libraries.

Author

Commented:
Sorry I've pasted it in a wrong way...

The one I've used is:

$(".fri").css("backgroundColor", "yellow")

Anyway I've tried also your code: same problem.

It does nothing...

It's like the execution order is wrong...

First it "colors" the background and then it draws the calendar but I can't get why:

      $(document).ready(function () {

        $(".responsive-calendar").responsiveCalendar({
          time: '2013-05'
/*
          events: {
            "2013-04-30": {"number": 5, "url": "http://w3widgets.com/responsive-slider"},
            "2013-04-26": {"number": 1, "url": "http://w3widgets.com"},
            "2013-05-03":{"number": 1},
            "2013-06-12": {}
}
*/
        });

coloraVenerdi();

      });


function coloraVenerdi() {
        $(".fri").css("backgroundColor", "yellow");
        $(".non-current").fadeOut();
}

Open in new window

Expert of the Year 2014
Top Expert 2014

Commented:
Well I tried their onInit() function and it drew the colors and then promptly overrode them.
Then I tried adding a class on the .fri class in the init and it overwrote it again.
What they need is callback when the calendar is loaded.
I suggest contact the authors,
Expert of the Year 2014
Top Expert 2014

Commented:
Reading thru their documentation, they say if you want to style days etc use the classes - they don't mention using jquery to do the styling.  They seem to be talking about CSS.
It doesn't make sense to use js to change the style at load.

Author

Commented:
That is ok then...

I wanted to be able to do so (using function or buttons) but I'll try with css.

Thanks for yout kind help and patience. :)
Expert of the Year 2014
Top Expert 2014

Commented:
You can do it with buttons (once the calendar is loaded), but you cannot just change it at load.

Author

Commented:
Mmmh...
So if I want to do...

Calculations?

Let's say I want to color 5 december in red but only if it's 2015?
Expert of the Year 2014
Top Expert 2014

Commented:
You would need to attach this to an event - click etc.

$("[data-day=5][data-month=12][data-year=2015]").css("background","red")

Open in new window

But once you change to a different month then this css will be lost.

Author

Commented:
You are my liege

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial