Events

Events

Monthly has built-in support to display events. Let's go over how to use them!

XML

The events are read from an external XML or JSON. Below is an example of an XML event list. Each event is within its own event tag. For a json example, browse the example files.

<?xml version="1.0"?>
<monthly>

    <event>
        <id>1</id>
        <name>Event Name</name>
        <startdate>2016-2-28</startdate>
        <enddate>2016-3-1</enddate> <!-- optional -->
        <starttime>9:00</starttime> <!-- optional (military time) -->
        <endtime>13:00</endtime> <!-- optional (military time) -->
        <color>#ffb128</color> <!-- optional -->
        <url>http://www.yourlink.com</url> <!-- optional -->
    </event>

</monthly>

• Important: Dates must be in the YYYY-MM-DD format.
• If it is a single day event, leave the 'enddate' field blank
• The 'color' field allows you to set a custom color for that event's indicator.
• Use the 'url' field to set a hyperlink on the event.

JS

Now that we have our events set up, you'll need to set some options when initializing Monthly. Set the mode to 'event', and then provide the path to your XML file.

$('#mycalendar').monthly({
    mode: 'event',
    dataType: 'xml',
    xmlUrl: 'events.xml'
});

That's all, folks! You should be running events in your calendar now! If you are not seeing events, check the following:

• Are you running the plugin locally? To import the XML, it needs to be on a server.
• Is your path to the XML file correct?
• Is something malformed in the XML file?