Calendar modules

[lindquist]

Hi I've been working on a site that needed a calendar. Specifically it needed a calendar with support for some rather iffy recurrence patterns.

This is all still pretty rough but I have written two modules.

Calendar : Implementes basic event recurrence expansion using four fields:

calendar_start

calendar_end

calendar_rrule

calendar_exdate

these fields are created on install (but not removed!) and are added to the template:

calendar-event

which is created on install (but again not removed on uninstall!).

the calendar-event template is intended to be expanded to represent the needed calendar event structure.

The ProcessCalendarAdmin provides a calendar admin gui.

the modules and a slightly more detailed readme can be found on github

https://github.com/lindquist/processwire-calendar

I'm not sure how much more time I can/will spend on this, so here it is in case anyone finds it useful

[Nico Knoll]

Looks really nice. I really have to try this later on

[Macrura]

wow this looks great! I have several sites that could use a good calendar management interface, and i've also been gradually designing my own version of a php calendar in PW, based on the old Thyme calendar.. this will surely give me a boost.

[kongondo]

Nice one! That makes three of us at least working on calendar modules ...I have been working on one myself but it is not yet ready for public consumption...

[renobird]

Kongondo, I'm still holding out hope to see your calendar module released.

lindquist, looks very nice. I'll take a look later today — thanks for sharing.

[apeisa]

Quickly tested this today (since I have need for it on one personal project). Very nice implementation and will definitely meet the criteria for my project. Few notices if lindquist or someone else goes further with this:

- used new [] array syntax (but just once) - I removed that since I run on Ubuntu LTS (stuck with php 5.3 until update to 12.04).

- no language tags (quick fix though)

- recurring events are done by writing RFC5545 RRULE format, which is of course way too technical for most users. Does anyone know any JS plugin that would offer nice UI for that? Would make lovely inputfield. (This might be it: https://github.com/jkbrzt/rrule )

- sabre library is huge and only small subset of it is in use. Would some smaller library be enough, like these: https://github.com/tplaner/When or https://github.com/simshaun/recurr

It was breeze to setup and works flawlessly. Admin ui is very snappy and easy to use. Nice work!

[lindquist]

Thanks for the comments so far

apesia, I did test tplaner/When, but the code is completely uncommented, and it has an issue that you have to make sure the start date (when expanding) matches the first occurrence. I ultimately failed to make it expand correctly.

I tested simshaun/recurr as well, but TBH I don't recall what the problem was :-/

In the end I ended up using Sabre because it actually did the job correctly, but I agree it's quite large for this limited purpose. However, it does open up the possibility to provide iCal import/export etc later on if someone was interested in that.

About the RRULE field, yes it's way too technical. Right now I have given my client a small document with the patterns she needs, that she can copy-paste from. But it would be great with a GUI to hide it away from the user

[apeisa]

Good to know! Sabre looks very polished, so no problems there. I'll implement this on my project tomorrow.

[SiNNuT]

........

- recurring events are done by writing RFC5545 RRULE format, which is of course way too technical for most users. Does anyone know any JS plugin that would offer nice UI for that? Would make lovely inputfield. (This might be it: http://jakubroztocil.github.io/rrule/ )

.........

A while back i spent some time looking for exactly that and found:

http://getfuelux.com/javascript.html#scheduler

https://github.com/collective/jquery.recurrenceinput.js

Unfortunately the first has a bootstrap dependency and the second does not have an online demo that i'm aware of. I did not have time to investigate further but it might be of some use.

[Beluga]

A while back i spent some time looking for exactly that and found:

http://getfuelux.com/javascript.html#scheduler

https://github.com/collective/jquery.recurrenceinput.js

Unfortunately the first has a bootstrap dependency and the second does not have an online demo that i'm aware of. I did not have time to investigate further but it might be of some use.

recurrenceinput is from the Plone project. It has jQuery Tools Dateinput & Overlay dependencies. jQuery Tools is not maintained anymore. Latest rel. is from 2012: https://github.com/jquerytools/jquerytools/releases/tag/v1.2.7 (I used to use it back in 2010-11)

Here is a screenshot from the recurrenceinput interface: http://jquer.in/jquery-plugins-for-html5-forms/recurrence-input/

In the screenshot I recognize the jQuery tools overlay interface.

I guess I'll add an issue and ask, if they would remove the dependency.

Edit: heh, it seems I don't have to: https://github.com/collective/jquery.recurrenceinput.js/issues/22

[Beluga]

@lindquist: How would one go about having a read-only Fullcalendar with the events in the frontend

I tried to mash something up using the admin stuff.

I got Fullcalendar to load, but events don't show up.

I got all the right stuff in my main.inc

    <link rel="stylesheet" type="text/css" href="<?php echo $templatesurl?>fullcalendar/fullcalendar.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo $templatesurl?>css/ProcessCalendarAdmin.css" />
    <script type="text/javascript" src="<?php echo $templatesurl?>scripts/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="<?php echo $templatesurl?>fullcalendar/moment.min.js"></script>
    <script type="text/javascript" src="<?php echo $templatesurl?>fullcalendar/fullcalendar.min.js"></script>
    <script type="text/javascript" src="<?php echo $templatesurl?>scripts/jquery.blockUI.js"></script>
    <script type="text/javascript" src="<?php echo $templatesurl?>scripts/ProcessCalendarOma.js"></script>

Here is my template for my calendar attempt:

$calendar = wire('modules')->getModule('Calendar');

$content = <<<HTML
<div id="CalendarAdmin-notification"></div>

<div id="CalendarAdmin-calendar"></div>

<div id="CalendarAdmin-tip">
    <p class="date"></p>
    <p class="title"></p>
    <p>(Click to edit event)</p>
</div>

<div id="CalendarAdmin-new-event-dialog">
    <p class="ca-ned-date"></p>
    <p>All event details can be edited afterwards by clicking the event in the calendar view</p>
    <fieldset>
        <label for="title">Title</label>
        <input type="text" name="title" id="ca-ned-title" />
        <label for="starttime">Start</label>
        <input type="text" name="starttime" id="ca-ned-starttime" placeholder="HH:MM" />
        <label for="endtime">End</label>
        <input type="text" name="endtime" id="ca-ned-endtime" placeholder="HH:MM" />
    </fieldset>
</div>

<div id="CalendarAdmin-edit-event-dialog">
    <p>What do you want to do?</p>
</div>
HTML;

function outputJsonEvents($start, $end) {
        // generate events
        $events = $calendar->expandEvents($start, $end);

        // generate json event array
        foreach($events as $e) {
            $recurs = $e->event->get(Calendar::EVENT_RRULE_FIELD) != '';

            $elem = array(
                'title' => (string)$e->event->title,
                'start' => $e->start->format(DateTime::ISO8601),
                'end' => $e->end->format(DateTime::ISO8601),
                'id' => (int)$e->event->id,
                'recurrence' => $recurs ? 1 : 0
            );
            if ($recurs) {
                $elem['color']='purple';
            }

            $json[] = $elem;
        }

        // TODO fix this - use new content type feature
        header('Content-type: application/json');
        return json_encode($json);
    }

function executeAjax() {
        // wire shortcuts
        $input = wire('input');
        $pages = wire('pages');
        //////////////////////////////////////////////////////////////////////
        // jsonEvents request (eg. fullcalendar)
        if ($input->get('jsonEvents') == 1) {
            // FIXME proper validation
            if (is_null($input->get->start)) {
                throw new WireException("start time not specified");
            }
            if (is_null($input->get->end)) {
                throw new WireException("end time not specified");
            }

            // get date/time interval
            $start_input = $input->get('start');
            $end_input = $input->get('end');

            // start / end dates
            $start = new DateTime($start_input);
            $end = new DateTime($end_input);

            // generate a list of json events for fullcalendar
            return outputJsonEvents($start, $end);
        }
      }
        
executeAjax();

include("main.inc");

[lindquist]

@Beluga: aren't you just missing an echo ?

echo executeAjax();

[Beluga]

@Beluga: aren't you just missing an echo ?

echo executeAjax();

Nothing happens.

Testing if the events are fetched ok in a basic way:

$start_input = $input->get('start');
$end_input = $input->get('end');

// start / end dates
$start = new DateTime($start_input);
$end = new DateTime($end_input);
$events = $calendar->expandEvents($start, $end);
var_dump($events);

I can see the events in the dump.

[lindquist]

@Beluga: Dunno. Sorry but I don't have time to dig into this a lot. I would verify that the event page as received by fullcalendar looks right. Also you haven't shown your actual call to show fullcalendar.

[Beluga]

@Beluga: Dunno. Sorry but I don't have time to dig into this a lot. I would verify that the event page as received by fullcalendar looks right. Also you haven't shown your actual call to show fullcalendar.

How would I verify the event pagE?

Isn't this the call ProcessCalendarOma.js

It is just an exact copy of ProcessCalendarAdmin.js

[Beluga]

Progress:

Added $calendar = wire('modules')->getModule('Calendar'); inside outputJsonEvents

Now when I removed all the validations, I could get some action finally

if ($input->get('jsonEvents') == 1) {

if (is_null($input->get->start)) {

if (is_null($input->get->end)) {

Axed those ^^ and now the whole page seems to get served as json. Meaning I'm seeing the html as plain text.

And I can see my test event beautifully appear at the top:

[{"title":"testaa2","start":"2015-07-12T15:00:00+0300","end":"2015-07-12T16:30:00+0300","id":1095,"recurrence":0}]

So what do I have to do to only feed that event as json to fullcalendar?

[hellomoto]

I installed this to a new site I'm working on and love it, just have a few ideas to make it even better:

• Add calendar_event_recurs checkbox field and display recurrence fields only if =1
• Headline field for recurring event instances (show if parent.template=calendar-event)
• In admin calendar, "Modify this event recurrence only" should create/edit a child page of the recurring event (calendar-event children to be named in date format)
• Display hidden events in admin calendar
• Open event editor from admin calendar in modal
• Simple front-end FullCalendar rendering (hidden events hidden)

Actually maybe the Admin Calendar and Calendar itself should be separate, then the Calendar can allow for different templates (e.g., blog posts or something) to also be included...

[AndZyk]

Great module with much potential.

About the RRULE field, yes it's way too technical. Right now I have given my client a small document with the patterns she needs, that she can copy-paste from. But it would be great with a GUI to hide it away from the user

I also would like to have a more simple way to set the event recurrence.

[owzim]

Looks great. Thanks for your effort and for making it open source. Earlier this year I wanted to make a calendar module myself but without the actual need, so I left it alone. Nice to see that you have integrated it with the FullCalendar jQuery plugin. Seems like the goto JS calendar solution atm.

Right now I need it for an actual project, so yay.

[BFD Calendar]

Does anyone have a working read-only version on a page yet? With the above examples 'get module' and 'render event' shows only recurring events in a table, 'ajax event request' shows nothing, and Beluga's code shows nothing. Maybe I'm missing something....

[Juergen]

Doesnt work with PW 3 - leads to error 500 during the installation.

[Bron]

I am a beginner in process wire and I fail already at the 2nd step (Create parent page to hold events). I do not know what is a 'parent page'. Can someone help me?

[kongondo]

Welcome to the forums and ProcessWire @Bron...

Home <= parent page of About

   About <= parent page of child 1 and child 2

     Child 1 <= parent page of grandchild

       Grandchild

     Child 2

You might want to start with the docs

[Bron]

@kongondo: I know that but i still do not understand how the parent page should look like in this case. And from which side it is the parent page.

[kongondo]

@Bron,

Apologies, my bad. I assumed too much . Hope you get an answer soon.