Calendar:Form (SAEF)
- Home
- Documentation
- Modules
- Calendar
- Tags
- Form (SAEF)
The Calendar:Form Stand-alone entry/edit form function allows your users to add and edit events via the front end. It's built on top of the native EE Stand-Alone Entry Form, so it can do anything the EE SAEF can do and more. It also allows for editing event entries and provides easy variables for form name="" attributes.
This function automatically adds hidden fields for entry_id and entry_date when editing events.
{exp:calendar:form} content {/exp:calendar:form}
In ExpressionEngine 2.x, you need to use the SafeCracker module, in place of the {exp:calendar:form} tag, to allow editing of entries. See example for an overview of implementation.
//use this instead of the {calendar_date_widget} when using SafeCracker
{exp:calendar:date_widget event_id="{segment_3}"}
Parameters
All parameters available in the native EE Stand-Alone Entry Form are available for use here. Additionally, these exist as well:
site_id=
site_id="1"
If using MSM, you can specify a Site ID in this parameter to filter entries down to that site.
event_id=
event_id="{segment_3}"
This parameter allows you to edit a specific event by specifying its entry ID. You can hardcode an event ID, pass it through an embed, or grab it from the URI.
event_name=
event_name="{segment_3}"
This parameter allows you to edit a specific event by specifying its short_name (entry url_title). You can hardcode a short_name, pass it through an embed, or grab it from the URI.
ignore_field=
ignore_field="field_name|another_field_name|etc"
This parameter was developed as a fix for Pixel & Tonic's Fieldframe fields. To get Calendar and Fieldframe to play nicely, specify into this parameter all Fieldframe field short_names you wish to update, seperated by the pipe character. Carry out your HTML form field coding as usual. If the form is for editing events, you'll also need to then wrap the Fieldframe fields with the EE Weblog:Entries tag. Once that's done, your SAEF form should be compatible with Fieldframe fields. See example here.
Variables
All variables available in the native EE Stand-Alone Entry Form are available for use here. Additionally, these exist as well:
- calendar_date_widget
- CUSTOM_FIELD
- CUSTOM_FIELD_field_name
- CUSTOM_FIELD_format_name
- CUSTOM_FIELD_format_value
calendar_date_widget
{calendar_date_widget}
This variables adds a date-selector widget similar to the one in the Publish/Edit page of the ExpressionEngine control panel. Additionally, for the Date Widget to work, you'll need several JS and CSS files called. We've created a couple tags to help you out with this, so your HTML Head tags should look like this:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="/themes/third_party/calendar/js/jquery-ui.custom.min.js"></script> {-- // remove "third_party" from path if using EE1 --}
{exp:calendar:datepicker_js}
{exp:calendar:datepicker_css}
</head>
Additionally, you can supply the include_jqui="off" parameter to {exp:calendar:datepicker_js} and {exp:calendar:datepicker_css} tags to stop Calendar's jQuery UI and CSS from loading in the event you have another instance of jQuery UI loading.
CUSTOM_FIELD
{CUSTOM_FIELD}
All custom weblog fields are available for use. To parse your custom weblog field data, just specify the short_name of the field. So to construct these variables, simply use custom_weblog_field_short_name (Ex: description).
CUSTOM_FIELD_field_name
{CUSTOM_FIELD_field_name}
This variable outputs the field ID name of custom weblog fields for the name="" attribute in your form fields. Used in conjunction with the CUSTOM_FIELD_field_name form field.
All custom weblog fields are available for use. To parse your custom weblog field ID names, append the variables with _field_name. So to construct these variables, simply use custom_weblog_field_short_name + _field_name (Ex: description + _field_name = description_field_name - outputs field_id_26).
CUSTOM_FIELD_format_name
{CUSTOM_FIELD_format_name}
This variable outputs the field ID name of custom weblog formatting fields for the name="" attribute in your form fields. This controls the formatting for a specific field (ex: xhtml, br, none). Used in conjunction with the CUSTOM_FIELD_format_value variable and the CUSTOM_FIELD_format_name form field.
All custom weblog fields are available for use. To parse your custom weblog field ID format names, append the variables with _format_name. So to construct these variables, simply use custom_weblog_field_short_name + _format_name (Ex: description + _format_name = description_format_name - outputs field_ft_26).
CUSTOM_FIELD_format_value
{CUSTOM_FIELD_format_value}
This variable outputs the current format value of custom weblog fields in your form fields (ex: xhtml, br, none). Used in conjunction with the CUSTOM_FIELD_format_name variable and the CUSTOM_FIELD_format_name form field.
All custom weblog fields are available for use. To parse the current formatting for a custom weblog field, append the variables with _format_value. So to construct these variables, simply use custom_weblog_field_short_name + _format_value (Ex: description + _format_value = description_format_value - outputs br).
Form Fields
All form fields available in the native EE Stand-Alone Entry Form are available for use here. Additionally, these exist as well:
CUSTOM_FIELD_field_name
<input type="text" name="{CUSTOM_FIELD_field_name}" value="{CUSTOM_FIELD}" />
This form field displays existing data for an event when editing, and allows a user to update the value for a given field. Used in conjunction with the CUSTOM_FIELD_field_name variable.
CUSTOM_FIELD_format_name
<input type="hidden" name="{CUSTOM_FIELD_format_name}" value="{CUSTOM_FIELD_format_value}" />
This form field displays existing formatting data of a custom field for an event when editing. Used in conjunction with the CUSTOM_FIELD_format_name and CUSTOM_FIELD_format_value variables.
Examples
Creating Events
Below is a complete example that will allow your users to submit events via the front end:
<html>
<head>
<title>Add an Event to the Calendar</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="/themes/third_party/calendar/js/jquery-ui.custom.min.js"></script> {-- // remove "third_party" from path if using EE1 --}
{exp:calendar:datepicker_js}
{exp:calendar:datepicker_css}
</head>
<body>
<div id="calendar_saef">
{exp:calendar:form weblog="calendar_events" return="calendar/month"}
<p><label>Title:</label><br />
<input type="text" name="title" value="{title}" size="80" /></p>
{calendar_date_widget}
<p><label>Summary:</label><br />
<textarea name="{event_summary_field_name}" rows="5" cols="65">{event_summary}</textarea>
<input type="hidden" name="{event_summary_format_name}" value="{event_summary_format_value}" /></p>
<p><label>Location:</label><br />
<input type="text" name="event_location_field_name" value="{event_location}" size="80" /></p>
<input type="hidden" name="{event_location_format_name}" value="{event_location_format_value}" /></p>
<p><input type="submit" name="submit" value="Submit" /></p>
{/exp:calendar:form}
</div>
</body>
</html>
Editing Events in EE2
In ExpressionEngine 2.x, you need to use the SafeCracker module to allow editing of entries. Below is a complete example that will allow your users to edit events via the front end in EE2:
<html>
<head>
<title>Edit an Event in the Calendar</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="/themes/third_party/calendar/js/jquery-ui.custom.min.js"></script> {-- // remove "third_party" from path if using EE1 --}
{exp:calendar:datepicker_js}
{exp:calendar:datepicker_css}
</head>
<body>
<div id="calendar_saef">
{exp:safecracker channel="calendar_events" entry_id="{segment_3}" return="calendar/event/{segment_3}/updated"}
<p><label>Title:</label><br />
<input type="text" name="title" value="{title}" size="80" style="width: 600px;" /></p>
{exp:calendar:date_widget event_id="{segment_3}"}
<p><label>Summary:</label><br />
<textarea name="event_summary" rows="5" cols="65" style="width: 600px; height: 100px;">{event_summary}</textarea></p>
<p><label>Location:</label><br />
<input type="text" name="event_location" value="{event_location}" size="80" style="width: 600px;" /></p>
<p><input type="submit" name="submit" value="Submit" /></p>
{/exp:safecracker}
</div>
</body>
</html>
Editing Events in EE1
Below is a complete example that will allow your users to edit events via the front end in EE1:
<html>
<head>
<title>Edit an Event in the Calendar</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="/themes/third_party/calendar/js/jquery-ui.custom.min.js"></script> {-- // remove "third_party" from path if using EE1 --}
{exp:calendar:datepicker_js}
{exp:calendar:datepicker_css}
</head>
<body>
<div id="calendar_saef">
{exp:calendar:form weblog="calendar_events" event_id="{segment_3}" return="calendar/month"}
<p><label>Title:</label><br />
<input type="text" name="title" value="{title}" size="80" /></p>
{calendar_date_widget}
<p><label>Summary:</label><br />
<textarea name="{event_summary_field_name}" rows="5" cols="65">{event_summary}</textarea>
<input type="hidden" name="{event_summary_format_name}" value="{event_summary_format_value}" /></p>
<p><label>Location:</label><br />
<input type="text" name="event_location_field_name" value="{event_location}" size="80" /></p>
<input type="hidden" name="{event_location_format_name}" value="{event_location_format_value}" /></p>
<p><input type="submit" name="submit" value="Submit" /></p>
{/exp:calendar:form}
</div>
</body>
</html>
Editing Events with Fieldframe fields
Below is an example of how to implement the Fieldframe fix in your form so that Calendar and Fieldframe fields play nicely together when editing events via the front end:
<html>
<head>
<title>Edit an Event in the Calendar</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="/themes/third_party/calendar/js/jquery-ui.custom.min.js"></script> {-- // remove "third_party" from path if using EE1 --}
{exp:calendar:datepicker_js}
{exp:calendar:datepicker_css}
</head>
<body>
<div id="calendar_saef">
{exp:calendar:form weblog="calendar_events" event_id="{segment_3}" return="calendar/month" ignore_field="fieldframe_field_name|another_fieldframe_field_name"}
<p><label>Title:</label><br />
<input type="text" name="title" value="{title}" size="80" /></p>
{calendar_date_widget}
<p><label>Summary:</label><br />
<textarea name="{event_summary_field_name}" rows="5" cols="65">{event_summary}</textarea>
<input type="hidden" name="{event_summary_format_name}" value="{event_summary_format_value}" /></p>
<p><label>Location:</label><br />
<input type="text" name="event_location_field_name" value="{event_location}" size="80" /></p>
<input type="hidden" name="{event_location_format_name}" value="{event_location_format_value}" /></p>
{exp:weblog:entries entry_id="{segment_3}" limit="1"}
<p><label>Fieldframe Field:</label><br />
<input type="text" name="fieldframe_field_name" value="{fieldframe_field_name}" size="80" /></p>
<p><label>Another Fieldframe Field:</label><br />
<input type="text" name="another_fieldframe_field_name" value="{another_fieldframe_field_name}" size="80" /></p>
{/exp:weblog:entries}
<p><input type="submit" name="submit" value="Submit" /></p>
{/exp:calendar:form}
</div>
</body>
</html>
