FullCalendar – dealing with duration

Recently I was struggling how to take the event duration into consideration when creating an event in my calendar on remotepairing.io. That was easier than I thought 🙂

Expectations

My objective was quite clear – I just wanted to automatically handle event duration. Same way as it is on Google Calendar:

No rocket science.

Implementation

As I read the API of FullCalendar it provides callback function namec select with arguments I need:

function( start, end, jsEvent, view, [ resource ] )

I already had this method inside, but I didn’t make use of end object 🙂 That was my code:

$('#calendar').fullCalendar({
        ...
        select: function (start, end, jsEvent, view) {
            $eventDate.val(moment(start, 'DD.MM.YYYY').format('DD-MM-YYYY'));
            $eventTime.val(moment(start, 'DD.MM.YYYY').format('HH:mm'));
            ShowEventPopup();
        }
        ...
    });

The only lacking thing was to play with end object to compute duration between start and end of the event.

Both start and end are Moment objects. At the beginning I thought I could use subtract method to do the thing, but it is not.

The best way to get the difference between two dates in Moment library is… diff method! 🙂

So! I only needed to add one line of code (‘minutes’ string defines what unit of time should be returned) :  $eventDuration.val(end.diff(start, 'minutes'));

$('#calendar').fullCalendar({
        ...
        select: function (start, end, jsEvent, view) {
            $eventDate.val(moment(start, 'DD.MM.YYYY').format('DD-MM-YYYY'));
            $eventTime.val(moment(start, 'DD.MM.YYYY').format('HH:mm'));
            $eventDuration.val(end.diff(start, 'minutes'));
            ShowEventPopup();
        }
        ...
    });

And that’s it 🙂

You can also check how it works by yourself on remotepairing.io

Summary

An unexpectedly problem-less piece of programming today – and satisfying 🙂 My calendar still gets closer to the usability of Google’s one, what I’m happy for.

Thanks for today and have a good week!