customd / jquery-calendar

A full day, week, and resource calendar for use with jQuery.
MIT License
62 stars 26 forks source link

How do I add / remove an event programmatically? #15

Closed jarrettchisholm closed 10 years ago

jarrettchisholm commented 10 years ago

How do I add / remove an event programmatically?

So in my code, something like:

// Add event
var event = [.......];
$('#calendar_div').calendar.add( event );

// Remove event by uid
var event_id = 5;
$('#calendar_div').calendar.remove( event_id );

// Get a list of events in the calendar
var events = array();
events = $('#calendar_div').calendar.getEvents();
$('#calendar_div').calendar.remove( events[0].uid );
jarrettchisholm commented 10 years ago

To add:

var event = {....} // initialize your new calendar event
var cal = $('#your_calendar_id').data('cal');
cal.target.cal('add', event);

There is no way to remove (by default). I added 2 methods for this (to jquery.calendar.js):

/**
         * Remove an event object to the calendar
         *
         * @param mixed uid     : The UID of the event that we want to remove.
         *
         * @scope public.
         */
        remove : function( uid ){           
            // Get shortcuts to calendar container and data.
            var $this = $(this),
            $event,
            data = $this.data(plugin_name);

            // If the calendar has been set up already...
            if( data ){

                // Find the event element.
                $event = data.cache.events[i];

                // IF we find one, we'll remove it.
                if( $event ){
                    //$($event).remove();
                    //_private.event.remove.apply( $event );
                    delete data.cache.events[uid];
                }
            }
        },

        /**
         * Clear all event objects from the calendar
         *
         * @scope public.
         */
        clear : function(){         
            // Get shortcuts to calendar container and data.
            var $this = $(this),
            data = $this.data(plugin_name);

            // If the calendar has been set up already...
            if( data ){

                for( i in data.cache.events ){
                    //data.cache.events[i].elems.remove();
                    data.target.cal('remove', i);
                }               
            }
        },

To use them, you can do something like this:

// To remove an event
var eventId = 5 // Get your event id
var cal = $('#your_calendar_id').data('cal');
cal.target.cal('remove', eventId);

// To clear all appointments from the calendar
cal.target.cal('clear');
jarrettchisholm commented 10 years ago

I haven't done anything (yet) to get a list of appointments.

samatcd commented 10 years ago

Thanks for the answer @jarrettchisholm.

Instead of needing to call .data('cal') you should be able to bypass this method and simply call $('#your_calendar_id').cal('add',event) directly.

samatcd commented 10 years ago

Commit 9603126759e854ad983b4c70561c6676a96bab3b adds a 'remove' method, which you can call like so:

$('#your_calendar_id').cal('remove',uid);

Optional parameters include jQuery animation speed (set to 0 for no animation) and easing:

$('#your_calendar_id').cal('remove',uid,'fast','ease-in-out');
jarrettchisholm commented 10 years ago

Awesome - Thanks @samatdf.