Solved

Tweak jquery responsive calendar

Posted on 2014-02-28
11
1,124 Views
Last Modified: 2014-03-01
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?
0
Comment
Question by:ltpitt
  • 6
  • 5
11 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39896429
Just add a class to your css

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

You don't need to use jQuery for this.
0
 
LVL 1

Author Comment

by:ltpitt
ID: 39896461
Thanks for your suggestion but I'd like to change it dynamically...

Why my

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

is not working?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39896469
It should be just

$(".fri").css("backgroundColor", "yellow");
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 1

Author Comment

by:ltpitt
ID: 39896477
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

0
 
LVL 58

Expert Comment

by:Gary
ID: 39896514
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,
0
 
LVL 58

Expert Comment

by:Gary
ID: 39896531
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.
0
 
LVL 1

Author Comment

by:ltpitt
ID: 39896843
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. :)
0
 
LVL 58

Expert Comment

by:Gary
ID: 39897255
You can do it with buttons (once the calendar is loaded), but you cannot just change it at load.
0
 
LVL 1

Author Comment

by:ltpitt
ID: 39897302
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?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39897326
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.
0
 
LVL 1

Author Comment

by:ltpitt
ID: 39897439
You are my liege
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question