Solved

Tweak jquery responsive calendar

Posted on 2014-02-28
11
1,163 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

756 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