This document is for an older version of
Calendar
.
View latest version →
Calendar for ExpressionEngine 1.x Retired
Channel Form
If you wish to allow users to submit and edit events on the front end templates of your site, you can do so using the Channel Form tag. Just make sure that your page calls jQuery and jQuery UI javascript files in order for the Calendar widget to work properly.
Creating Events
Below is a complete example that will allow your users to submit events through 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>
{exp:calendar:datepicker_js}
{exp:calendar:datepicker_css}
</head>
<body>
<div id="calendar_saef">
{exp:channel:form channel="calendar_events" return="calendar/event/ENTRY_ID"}
<p>
<label>Title:</label><br />
<input type="text" name="title" />
</p>
{exp:calendar:date_widget}
<p>
<label>Summary:</label><br />
<textarea name="event_summary"></textarea>
</p>
<p>
<label>Location:</label><br />
<input type="text" name="event_location" />
</p>
<p>
<input type="submit" name="submit" value="Submit" />
</p>
{/exp:channel:form}
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Editing Events
Below is a complete example that will allow your users to edit events through 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>
{exp:calendar:datepicker_js}
{exp:calendar:datepicker_css}
</head>
<body>
<div id="calendar_saef">
{exp:channel:form
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}" />
</p>
{exp:calendar:date_widget event_id="{segment_3}"}
<p>
<label>Summary:</label><br />
<textarea name="event_summary">{event_summary}</textarea>
</p>
<p>
<label>Location:</label><br />
<input type="text" name="event_location" value="{event_location}" />
</p>
<p>
<input type="submit" name="submit" value="Update" />
</p>
{/exp:channel:form}
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34