ExpressionEngine Add-ons

Using with Channel Form

Calendar supports integration with the Channel Form tag to allow submitting/editing of event data to new entries or editing existing ones. It allows you to call the same Calendar widget as available in the control panel.

click to enlarge

Simply place the following template variable within your Channel Form form where you'd like your Tag field(s) to show up:

{field:CALENDAR_FIELDTYPE_NAME}

Then, be sure to have the following CSS files in your head:

<link href="{exp:calendar:theme_folder_url}plugins/jquery-timepicker-jt/jquery.timepicker.css" rel="stylesheet">
<link href="{exp:calendar:theme_folder_url}css/calendar.fieldtype.css" rel="stylesheet">
<link href="{exp:calendar:theme_folder_url}css/template.fieldtype.css" rel="stylesheet">

And then place the following JS files in your footer:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="{exp:calendar:theme_folder_url}plugins/jquery-timepicker-jt/jquery.timepicker.min.js"></script>
<script type="text/javascript" src="{exp:calendar:theme_folder_url}js/calendar.fieldtype.js"></script>
<script type="text/javascript" src="{exp:calendar:theme_folder_url}js/template.fieldtype.js"></script>

A simple working example of a Channel Form form would look like this:

<h3>Create a new Event</h3>
{exp:channel:form
    channel="events"
    return="calendar/event/URL_TITLE"
}
    <p>
        <label for="title">Title</label>
        <input type="text" name="title" id="title" maxlength="100" onkeyup="liveUrlTitle();" />
        <input type="hidden" name="url_title" id="url_title" value="{url_title}" maxlength="75" />
    </p>
    <p>
        {status_menu}
        <label for="status">Status</label>
        <select name="status" id="status">
            {select_options}
        </select>
        {/status_menu}
    </p>
    <p>
        <label for="body">Body</label>
        <textarea name="body" id="body" /></textarea>
    </p>
    <p>
        {!-- Calendar field will populate here --}
        <label for="calendar">Calendar</label>
        {field:CALENDAR_FIELDTYPE_NAME}
    </p>
    <button type="submit">Publish</button>
    {if no_results}
        <p>No results</p>
    {/if}
{/exp:channel:form}