Solved

Tweak jquery responsive calendar

Posted on 2014-02-28
11
1,085 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
Comment Utility
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
Comment Utility
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
Comment Utility
It should be just

$(".fri").css("backgroundColor", "yellow");
0
 
LVL 1

Author Comment

by:ltpitt
Comment Utility
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
Comment Utility
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
You are my liege
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

771 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now