Solved

Tweak jquery responsive calendar

Posted on 2014-02-28
11
1,178 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
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 
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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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…
The viewer will learn how to dynamically set the form action using jQuery.
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…

738 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