Fullcalendar.io integration

26 views
Skip to first unread message

Matthew Leingang

unread,
May 31, 2016, 9:17:45 AM5/31/16
to nikola-discuss
Hi,

I would like to have a calendar page on my nikola site with my free/busy times on it.  I found the FullCalendar JavaScript library <http://fullcalendar.io>, which is pretty amazing, and decided to integrate it.

What I wanted to do was write a ReST directive plugin so that in my in my calendar.rst file I could have

    .. calendar::
        :opt1: foo
        :opt2: bar 

etc, and have the plugin do all the work.  But I had trouble generating the HTML in the proper order.  To use fullcalendar, .
* one or two CSS <link>s need to be inserted into the document <head>.
* a simple <div id="calendar"></div> tag goes into the page <body>.
* the fullcalendar.js script needs to go after jquery and moment.js are loaded.  In the bootstrap3 theme this occurs at the end of the page content.
* calendar creation code like the below needs to go after fullcalendar.js (or maybe just after jquery):

    <script>
        $(document).ready(function() {
            $('#calendar').fullCalendar({
                defaultView: 'agendaWeek',
                header: {
                        left: 'title',
                        center: 'agendaDay,agendaWeek,month',
                        right: 'today prev,next'
                },
                weekends: false,
                businessHours: true,
                // ...
                }
            })
        });
    </script>

My plugin's run method can create the div, no problem.  But for the extra html and scripting, I ran into trouble.  First, I tried using template hooks in my plugin's `set_site` method, but then I discovered that this extra html ended up on every page, not just the calendar page.  Then I tried adding those template hooks to the plugin's `run` method, but they didn't seem to get recognized there.  

Then I found the documentation on creating custom pages and made a custom calendar.tmpl derived from story.tmpl.  That accomplished what I wanted.  Except now the fullcalendar configuration code is in the template, and the plugin does almost nothing.  Kind of unsatisfying. 

What's the "nikola way" to do this?  Is there a way I can put calendar configuration options into the RST file and pass them to the template?

Thanks in advance for any advice.

Best,
Matthew

Roberto Alsina

unread,
May 31, 2016, 9:28:22 AM5/31/16
to nikola-discuss
Honestly, this is something where we need to find the best way because what we have now sort of sucks.

So, perhaps we need the plugin to be able to register things to be added at the end of the body, somehow? That way the plugin can say "hey, I added a calendar, please put this stuff after jquery" as well as in head "I added a calendar, you need this CSS for pages which include this"

If we find a decent way to do this, it will make galleries and other things work better too.

--
You received this message because you are subscribed to the Google Groups "nikola-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to nikola-discus...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Matthew Leingang

unread,
May 31, 2016, 10:11:24 AM5/31/16
to nikola-discuss, ral...@kde.org
Thanks for your response.  I do think that from an author-interface point of view, being able to specify inclusion and configuration of the calendar in the source file is the way to go.  As far as implementing, allowing the plugin to add content not just at the point of encounter, but in the document head or end, would be super. :-)

This might also make the mathjax implementation nicer.  Right now, you have to explicitly add a tag to indicate that the page has mathjax in it.  I noticed in the templates there are a lot of blocks specifically switching on the presence of mathjax.  It seems like ideally, the first invocation of `:math:` or `.. math::` should ensure that the mathjax javascript goes where it needs to go.

—Matthew

Roberto Alsina

unread,
May 31, 2016, 10:26:52 AM5/31/16
to nikola-...@googlegroups.com
Sounds like the registry of CSS and JS files to add should go in the Post object... this is going to be tricky.

Matthew Leingang

unread,
May 31, 2016, 11:06:00 AM5/31/16
to nikola-discuss, ral...@kde.org
Well, this is shaping up to be a summer of nikola, so please let me know if I can help with testing.  

—Matthew

Roberto Alsina

unread,
May 31, 2016, 11:38:44 AM5/31/16
to nikola-discuss
Will do. I am sort of having trouble getting to implement stuff in Nikola lately but I'll give it a shot.

Reply all
Reply to author
Forward
0 new messages