Programming / Remote-pairing

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:

calendar behavior

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!

Somewhat experienced programmer who tries to find intrinsic meaning in each act he does. Increasingly builds his courage to let his life be driven by passion. Currently giving blogging a whirl.