Week at a glance with Full Calendar

Adding onto the Full Calendar post, here’s something you can use to show a week at a glance.

1. Just change the defaultView attribute for the calendar you are rendering

    $("#cal_viewcalendarweekataglance").fullCalendar({
        theme: true,
        events: "SomeWebPage.aspx",
        cache: true,
        height: 160,
        defaultView: 'basicWeek',
        eventRender: function (event, element) {
            element.find('span.fc-event-title').html(element.find('span.fc-event-title').text());
        },
        eventMouseover: function (event, element, view) {
            $(this).css('border', '3px dashed #c70000');
        },
        eventMouseout: function (event, element, view) {
            $(this).css('border', '0px');
        }
    });

Making the Full Calendar droppable

Another note on the Full Calendar I posted earlier. Here’s how you could make it respond to drag and drop events using jquery.

1. Make something draggable

    $("#img_myimage").draggable({
        zIndex: 999,
        revert: true,      // will cause the event to go back to its
        revertDuration: 0  //  original position after the drag        
    });

2. Make your calendar capable of accepting draggable objects (in the calendar setup)

    droppable: true,

3. Add a call back method to your calendar to fire when something is dropped on it (in the calendar setup)
As an example, let’s just do an AJAX call to a page if the object is dropped on a date of today or in the future. Ignore else.

        drop: function (date, allDay) {
            var now = new Date();
            var yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
            if (date > yesterday) {
                $("#dialog_somedivtagopensup").dialog("open");
                $.ajax({
                    type: "GET",
                    url: "SomeWebPage.aspx,
                    cache: false,
                    success: function (html) {
                        $("#dialog_somedivtagopensup").html(html);
                    }
                });
                return false;
            };
        }

4. You could even add a bit to it, say you want to read something in later, like maybe distinguish between a couple of objects that have been dropped.
Let’s say you have 2 draggable objects.

    $("#img_draggable1").data('taskname', 'Task1');
    $("#img_draggable2").data('taskname', 'Task2');

In the drop function of the calendar object, you could check for this information.

    var taskName = $(this).data('taskname');
    if (taskName == "Task1") {
        //do something
    } else {
        //do something else
    };

Useful features with Full Calendar

The Full Calendar I posted earlier accepts JSON objects as events. A couple of notes.

1. Formatting HTML that comes back with the return JSON feed. When setting up your calendar object, you can define some methods.

        eventRender: function (event, element) {
            element.find('span.fc-event-title').html(element.find('span.fc-event-title').text());
        },

2. Changing the border of an event for mouse events.

        eventMouseover: function (event, element, view) {
            $(this).css('border', '3px dashed #c70000');
        },
        eventMouseout: function (event, element, view) {
            $(this).css('border', '0px');
        },