Skip to main content

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>

​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>
Page Feedback