7

I'm building a site that uses Solspace's Calendar module to manage bookings for rental properties.

The booking entries are all made on a single calendar and are related to one of the property entries by means of a relationship field.

The event entries need to be made on the front end of the site by the property owners so I have an SAEF to allow them to do this.

The problem I have is that it seems one must use the {exp:calendar:date_widget} tag to get the date entry fields. Unfortunately this generates a "widget" that includes a lot of stuff that simply isn't needed for this application.

I can do stuff with javascript to customise the widget, such as ticking the "all day" box and hiding it, but it just seems like a horrible hack when I'm used to just building what I need. I really hate the fact I'm tied to using this nasty widget.

I have tried simply using the HTML and JS that the widget generates, although there are some custom id values generated that mean I'd need to work out what they're doing in order to get the right values going into the entry. Besides that, the datepicker doesn't work.

From browsing the Solspace support forums it seems the common answer to this type of question is "you have to use the widget... it does lots of other stuff behind the scenes".

Does anyone have experience of this problem and some kind of workable, non-hacky solution?

6

Just got this one working on a similar project:

Short answer:

You have to make sure you are submitting all of the fields that the calendar module needs and that they are named correctly

Long answer:

At the end of the "save_calendar_data" var/function (starts on line 1191) of /themes/third_party/calendar/js/calendar_publish.js comment out "return success", and insert "return false":

1316   // TODO: We could check for errors at some point...
1317        success = true;
1318   // Comment out return success, and return false instead
1319        return false;
1320        //return success;
1321    };
1322    //END save_calendar_data

then if you run the {exp:calendar:date_widget} on a page with {exp:calendar:datepicker_js} included, you can then inspect the HTML results after attempting to post an entry, and you will find the following div appended to the end of your safecracker form:

<div id="calendar_data">
      <input type="hidden" name="calendar_id" value="1">
      <input type="hidden" name="rule_id[0]" value="">
      <input type="hidden" name="rule_type[0]" value="+">
      <input type="hidden" name="all_day[0]" value="y">
      <input type="hidden" name="start_time[0]" value="0001">
      <input type="hidden" name="end_time[0]" value="2359">
      <input type="hidden" name="start_date[0]" value="20121111">
      <input type="hidden" name="end_date[0]" value="20121113">
      <input type="hidden" name="repeat_years[0]" value="">
      <input type="hidden" name="repeat_months[0]" value="">
      <input type="hidden" name="repeat_weeks[0]" value="">
      <input type="hidden" name="repeat_days[0]" value="">
      <input type="hidden" name="days_of_week[0]" value="">
      <input type="hidden" name="relative_dow[0]" value="">
      <input type="hidden" name="days_of_month[0]" value="">
      <input type="hidden" name="months_of_year[0]" value="">
      <input type="hidden" name="end_by[0]" value="">
      <input type="hidden" name="end_after[0]" value="">
</div>

Copy these hidden fields and you can use them and whatever JS/CSS without the exp:calendar JS/CSS embeds to create a more typical safecracker entry form. In the following example I use JS to update the start and end date, and hard code all the other options in the hidden fields.

{exp:safecracker class="safecracker" channel="event" include_jquery="no" datepicker="no" preserve_checkboxes="yes" safecracker_head="no"}
<ul class="formRows">
      <div style="display:none;">
            <div id="calendar_data">
                  <input type="hidden" name="calendar_id" value="1">
                  <input type="hidden" name="rule_id[0]" value="">
                  <input type="hidden" name="rule_type[0]" value="+">
                  <input type="hidden" name="all_day[0]" value="y">
                  <input type="hidden" name="start_time[0]" value="0001">
                  <input type="hidden" name="end_time[0]" value="2359">
                  <input type="hidden" name="repeat_years[0]" value="">
                  <input type="hidden" name="repeat_months[0]" value="">
                  <input type="hidden" name="repeat_weeks[0]" value="">
                  <input type="hidden" name="repeat_days[0]" value="">
                  <input type="hidden" name="days_of_week[0]" value="">
                  <input type="hidden" name="relative_dow[0]" value="">
                  <input type="hidden" name="days_of_month[0]" value="">
                  <input type="hidden" name="months_of_year[0]" value="">
                  <input type="hidden" name="end_by[0]" value="">
                  <input type="hidden" name="end_after[0]" value="">
            </div>
      </div>
      <li>
            <label for="title">Title</label>
            <input type="text" name="title" id="title" value="{title}">
      </li>
      <li>
            <label for="start_date">Start Date</label>
            <input type="text" name="start_date[0]" id="start_date" class="datepicker">
      </li>
      <li>
            <label for="end_date">End Date</label>
            <input type="text" name="end_date[0]" id="end_date" value="" class="datepicker">
      </li>
      <li>
            <input type="submit" name="submit" value="Submit" id="formSubmit">
      </li>
</ul>
{/exp:safecracker}
| improve this answer | |
  • Well that's a very good explanation - I was about the raise same problem, but - I found this - thank you. – Vladyn Jul 5 '15 at 6:43
  • Is the comments and return should stay in the "/themes/third_party/calendar/js/calendar_publish.js" ? I've added also as per your example: <input type="hidden" name="start_date[0]" value="{segment_3}{segment_4}{segment_5}"> <input type="hidden" name="start_time[0]" value="{segment_6}:{segment_7}"> <input type="hidden" name="end_time[0]" value="{segment_6}:{segment_7}"> fields after the the list of the other hidden fields, where "add/book/2015/07/01/11/00" is my url segment structure like year/month/date/hour/minutes – Vladyn Jul 8 '15 at 6:57
2

We added a safecracker form with an extra field as a date field, and allowed the user to submit the date in this field. The entry went in under a 'pending' status, so it allowed the admin via the admin panel later to add it via the cal widget.

Not entirely a 'non-hack', but might help the workflow if it is an option.

| improve this answer | |
  • Nice idea, and thank you, but it won't work in this case as the idea is for the property owner to manage the whole kaboodle themsleves with no input from a site admin. – foamcow Nov 23 '12 at 0:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.