3

What i am trying

I am trying to implement an event management site in which when a link is clicked a popup appears with a calendar showing events in it. I am using jquery week calendar here.

Requirement

The problem i am facing here is, at first when the link is clicked the first time the calendar works fine. But when i click it again without page refresh the calendar does not show. When i inspected it shows error

TypeError: options.shortDays is undefined

...options.useShortDayNames ? options.shortDays[date.getDay()] : options.longDays[d... in jquery.weekcalendar.js (line 3098).

How can I solve this issue?

The calendar works only the first time after page load.

Script

 <a href="#" data-reveal-id="reveal_popup" onclick="calendarpop('MT','1');" data-closeonbackgroundclick="false" data-dismissmodalclass="close-reveal-modal">due_today</a>

 <div id="reveal_popup" class="reveal-modal">
   <div id="calendar_popup"></div>
   <a class="close-reveal-modal">&#215;</a>
 </div>


 function calendarpop(cat,typ) {

    if(typ == 1){
        var days = 1;
    }
    else if(typ==2){
        var days = 2;
    }
    else if(typ==3){
        var days = 7;
    }

    var $calendar = $('#calendar_popup').weekCalendar({
        timeslotsPerHour: 4,
        scrollToHourMillis : 0,
        height: function($calendar){
            return $(window).height() - $('h1').outerHeight(true);
        },
        eventRender : function(calEvent, $event) {
            if (calEvent.end.getTime() < new Date().getTime()) {
                $event.css('backgroundColor', '#aaa');
                $event.find('.wc-time').css({
                    backgroundColor: '#999',
                    border:'1px solid #888'
                });
            }
        },

        data : function(start, end, callback) {
            $.getJSON(
            site_url()+'/event/eventpop/'+cat+'/'+typ,
            '',
            function(result) {
                callback(result);
            }
        );
        },
        allowCalEventOverlap : true,
        overlapEventsSeparate: true,
        showAsSeparateUser: false,
        displayOddEven: true,
        displayFreeBusys: true,
        daysToShow: days,
        buttons: false,
        headerSeparator: ' ',
        useShortDayNames: true,
        firstDayOfWeek: $.datepicker.firstDay,
        shortDays: $.datepicker.dayNamesShort,
        longDays: $.datepicker.dayNames,
        shortMonths: $.datepicker.monthNamesShort,
        longMonths: $.datepicker.monthNames,
        businessHours :{
            start: 6, 
            end: 22, 
            limitDisplay: true
        },
        dateFormat: 'd F Y'
    });

}
Developer
  • 1,030
  • 6
  • 14
  • 37

1 Answers1

0

Can you go here: http://jsfiddle.net/83mMH/14/

Add the URL to the JSON data please, and then we can debug from there.

I also find it more maintainable to externalise all the JS including removing onclick="" from html and using the jQuery event listeners instead.

jQuery(document).ready(function($)
                       {
$('#reveal_popup').click(function()
{
  calendarpop('MT','1');
});
var calendarpop = function calendarpop(cat,typ) 
{
var days;
    if(typ == 1){
        days = 1;
    }
    else if(typ==2){
        days = 2;
    }
    else if(typ==3){
        days = 7;
    }

    var $calendar = $('#calendar_popup').weekCalendar({
        timeslotsPerHour: 4,
        scrollToHourMillis : 0,
        height: function($calendar){
            return $(window).height() - $('h1').outerHeight(true);
        },
        eventRender : function(calEvent, $event) {
            if (calEvent.end.getTime() < new Date().getTime()) {
                $event.css('backgroundColor', '#aaa');
                $event.find('.wc-time').css({
                    backgroundColor: '#999',
                    border:'1px solid #888'
                });
            }
        },

        data : function(start, end, callback) {
            $.getJSON(
            site_url()+'/event/eventpop/'+cat+'/'+typ,
            '',
            function(result) {
                callback(result);
            }
        );
        },
        allowCalEventOverlap : true,
        overlapEventsSeparate: true,
        showAsSeparateUser: false,
        displayOddEven: true,
        displayFreeBusys: true,
        daysToShow: days,
        buttons: false,
        headerSeparator: ' ',
        useShortDayNames: true,
        firstDayOfWeek: $.datepicker.firstDay,
        shortDays: $.datepicker.dayNamesShort,
        longDays: $.datepicker.dayNames,
        shortMonths: $.datepicker.monthNamesShort,
        longMonths: $.datepicker.monthNames,
        businessHours :{
            start: 6, 
            end: 22, 
            limitDisplay: true
        },
        dateFormat: 'd F Y'
    });
}
});
Daniel Waters
  • 431
  • 3
  • 21