how do I implement $('#calendar').weekCalendar('today')?

Question

I know very little about javascript so I'm not exactly sure what I'm doing. Basically, our team is working on a project that uses the jQuery weekcalendar javascript. By default the calendar will display an entire week.

My problem is this: I have multiple css files that fit different screens which I call using another javascript. For the smallest screen resolution, the one I call for mobiles and the entire calendar wouldn't fit the set width for this resolution so I need to display just the current day. I've found on websites that I need to use $('#calendar').weekCalendar("today") but I can't figure out how to implement it and what I should put on the if statement.

Here's what the code I tried looks like,

<script type="text/javascript">
$(document).ready(function () {
    if (document.styleSheets('mobile.min.css')) {
        $('#calendar').weekCalendar('today');
    }
})

Obviously, that doesn't work and I believe its wrong. Can somebody please help me? Thanks.

Answer 1

I haven't used the Adapt js library but looking at it you can implement a callback function. That means when the page is resized, it will call your function.

so make sure that in your declaration of the ADAPT CONFIG the call back is set. In this case

callback: ChangeCalendar

Then on your page in the script tags, or in the js file you need a callback function to handle the callback. it will pass an index corresponding to the size that applies. I recommend using a switch statement in the callback function to handle the size change.

ChangeCalendar(index, width)
{
    switch (index) {
       // handles the first item in the range (0 to 760px)
     case 0: $('#calendar').weekCalendar('today');
     break;
      // handles the second item in the range (760 to 980px)
    case 1: //something else
      break;
    // handles everything we missed
    default:
    break;
   }
}


Of course you could vary this to use the width parameter, and then use if statements to handle a set of ranges, such as if (width > 950) { etc }

I hope this solves your problem.