Jump to content

Calendar modules


lindquist

Recommended Posts

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

post-843-0-00650400-1430354188_thumb.png

post-843-0-23209800-1430354189_thumb.png

post-843-0-50033000-1430354190_thumb.png

post-843-0-89389400-1430354191_thumb.png

  • Like 23
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

  • Like 4
Link to comment
Share on other sites

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 :-)

  • Like 3
Link to comment
Share on other sites

........

- 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.

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

@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");
Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

@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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • 2 months later...

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...

Link to comment
Share on other sites

  • 1 month later...

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.

Link to comment
Share on other sites

  • 4 weeks later...

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.

Link to comment
Share on other sites

  • 4 weeks later...
  • 3 months later...
  • 1 month later...

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...