Date and Time Selection Widget in Add/Edit Event

gengwall · Joined: 20 Apr 2006 Posts: 23 Location: Minnesota

I know this is on the future development list but here is an "out of the box" kind of solution enabling better (one click) date and time entry in add/edit events. I have incorporated the open source "The DHTML Calendar" widget by dynarch.com into my plans calendar Very Happy

. Check it out on our test site:

MGEFC Calendar Add/Edit Events

I will post instructions next week as I am pretty tied up with work and family stuff right now.

It was really pretty easy to implement. I have checked the display out on Firefox 1 and IE 6. I would appreciate any feedback about display in other browsers.

rfthomas · Joined: 22 Mar 2006 Posts: 22

I like it...look forward to the "how to".

gengwall · Joined: 20 Apr 2006 Posts: 23 Location: Minnesota

Installation Instructions:

I - Calendar Widget Setup

1. Download the calendar widget zip file from dynarch (click here to go to their product page. The download link is in the right column.)

2. Extract the zip files. You can extract them into the plans directory or into your root directory. They will create their own "jscalendar-1.0" dicrectory along with sub directories. I put them in my plans directory to simplify pointing to the widget. I figured, if I use the widget anywhere else on the site I can point to it easy enough but since my primary function was to integrate it with plans, this seemed the logical choice.

Note: There are a lot of files in the zip file but you really only use 4 besides the image files. Those are:

a language file - mine is english - "calendar-en.js"
a style sheet - I used "calendar-green.css" and modified it slightly to fit the color scheme on our site.
the setup file - "calendar-setup.js"
and the main calendar file - "calendar.js".

These files require some changes in a subsequent step so you need to decide which language and style sheet you are going to go with. All of the other javascript, css, and html files are unnecessary.

3. Set up the calendar according to dynarch's instructions. This involves changing the "calendar-setup.js" file. You can, I think, mess with these parameters as much as you want. The main point is that you need to turn on time selection. Therefore, regardless of what other changes you make, make sure to set the "showsTime" parameter to true.

4. Here is the big change to the widget files. Since the object name of "calendar" messes with something in plans (or maybe many things, I didn't bother to investigate), you need to change it and all references to it in order for the widget to work. Simply open up the 4 files listed above and do a global search and replace on the word "calendar", changing it to something else (make sure the search is NOT case sensitive. You want to change all occurances beginning with both capital and lower case "c"). I chose to simply append a "z" to the beginning, making it all read "zcalendar". When you see the label/name "zcalendar" in these instructions going forward, remember that you should use the rename that you chose in those places.

II - Plans Setup

1. In plans_config.pl, add an option in the "Other Options" section which reads:

#when selecting event times, this is the increment
#that the time selection minutes will increase by.
#This option allows you to increment time entries
#by something more logical than 1 minute at a time.
#It should be a value between 1 and 60 and should
#divide evenly into 60. Therefore, the valid values are:
#1,2,3,4,5,6,10,12,15,20,30,60
$options{event_time_inc}=15;

(I have formatted the above so that there will be no line wrapping difficulties when copying and pasteing into plans_config.pl You are free to rework the comments into one line or eliminate them all together.)

2. Add the following 4 lines to the head section of your plans.template file

<script type="text/javascript" src="http://www.mgefc.org/cgi-bin/plans/jscalendar-1.0/calendar.js"></script>
<script type="text/javascript" src="http://www.mgefc.org/cgi-bin/plans/jscalendar-1.0/lang/calendar-en.js"></script>
<script type="text/javascript" src="http://www.mgefc.org/cgi-bin/plans/jscalendar-1.0/calendar-setup.js"></script>

<link rel="stylesheet" type="text/css" media="all" href="http://www.mgefc.org/cgi-bin/plans/jscalendar-1.0/calendar-green.css" title="Green Calendar" />

Of course, make sure the paths are correct for wherever you unzipped the calendar widget files. Also make sure you use the correct names that correspond to your specific language js file and style sheet.

NEXT - There are two major changes to plans.cgi. Both changes, (actually one change and one addition) occur in the "add_edit_events_interface" subroutine. This is found at apx line 2895 in plans.cgi (assuming, of course, you haven't made prior changes to this program).

3. Change the date/time selection display in the add_edit_event_interface subroutine. This section reads as follows in the original program (version 7.6.3!)

<div class="leftcol" style="margin-bottom:0;">
<label class="required_field" for="evt_start_date">$lang{event_start}</label>
</div>
<div class="rightcol" style="margin-bottom:0;white-space:nowrap;">
<input id="evt_start_date" name="evt_start_date" style="width:7em;" value = "$event_start_date">
</div>

<div class="leftcol" style="">
<label class="required_field" for="evt_days">$lang{event_length}</label>
</div>
<div class="rightcol" style="white-space:nowrap;">
<input id="evt_days" name="evt_days" style="width:2em;" value = "$event_days">
<input type="checkbox" id="all_day_event" name="all_day_event" value="1"$all_day_event_checked onChange="all_day_event_toggle(this.checked);">
<label class="optional_field" for="all_day_event">$lang{all_day_event}</label>
</div>

<div id="all_day_event_toggle0" style="$all_day_event_toggle0_style">
<div class="leftcol" style="margin-bottom:0;">
<label class="required_field" for="evt_start_time">$lang{event_start_time}</label>
</div>
<div class="rightcol" style="margin-bottom:0;white-space:nowrap;">
<input id="evt_start_time" name="evt_start_time" style="width:7em;" value = "$event_start_time">
</div>
<div class="leftcol" style="margin-bottom:0;">
<label class="optional_field" for="evt_end_time">$lang{event_end_time}</label>
</div>
<div class="rightcol" style="margin-bottom:0;white-space:nowrap;">
<input id="evt_end_time" name="evt_end_time" style="width:7em;" value = "$event_end_time">
</div>
</div>

It begins right after the textarea with the name/id "evt_details". It begins on apx line 3107. Once you have found this section of code, replace it with the following:

<div style="width:500px;float:right;margin-right:20px;">
<div style="float:left;width:280px;overflow:hidden;margin-bottom:5px;">
<table cellpadding="0" cellspacing="0" border="0" style="height:190px"><tr><td style="vertical-align:middle;">

<div class="leftcol" style="margin-bottom:0;">
<label class="required_field" for="evt_start_date">$lang{event_start}</label>
</div>
<div class="rightcol" style="margin-bottom:0;white-space:nowrap;">
<input id="evt_start_date" name="evt_start_date" style="width:7em;" value = "$event_start_date">
<input id="poststartdt" type="radio" checked name="postdate" value="start">
<span style="width:25%;text-align:right;font-size:12px;vertical-align:bottom"><< post</span>
</div>

<div class="leftcol" style="margin-bottom:0;">
<label class="optional_field" for="evt_end_date">$lang{event_end}</label>
</div>
<div class="rightcol" style="margin-bottom:0;white-space:nowrap;">
<input id="evt_end_date" name="evt_end_date" style="width:7em;" value = "$event_end_date">
<input id="postenddt" type="radio" name="postdate" value="end">
<span style="width:25%;text-align:right;font-size:12px;vertical-align:top">date to</span>
</div>

<div class="leftcol" style="white-space:nowrap;">
<label class="required_field" for="evt_days">$lang{event_length}</label>
</div>
<div class="rightcol" style="margin-bottom:0;width:60px">
<input id="evt_days" name="evt_days" style="width:30px;" value = "$event_days">
</div>

<div class="leftcol" style="white-space:nowrap;">
<label class="optional_field" for="all_day_event">$lang{all_day_event}</label>
</div>
<div class="rightcol" style="margin-bottom:0;white-space:nowrap;">
<input type="checkbox" id="all_day_event" name="all_day_event" value="1"$all_day_event_checked onChange="all_day_event_toggle(this.checked);">
</div>

<div id="all_day_event_toggle0" style="$all_day_event_toggle0_style">
<div class="leftcol" style="margin-bottom:0;">
<label class="required_field" for="evt_start_time">$lang{event_start_time}</label>
</div>
<div class="rightcol" style="margin-bottom:0;">
<input id="evt_start_time" name="evt_start_time" style="width:7em;" value = "$event_start_time">
<input id="poststarttm" type="radio" checked name="posttime" value="start">
<span style="width:25%;text-align:right;font-size:12px;vertical-align:bottom"><< post</span>
</div>

<div class="leftcol" style="margin-bottom:0;">
<label class="optional_field" for="evt_end_time">$lang{event_end_time}</label>
</div>
<div class="rightcol" style="margin-bottom:0;white-space:nowrap;">
<input id="evt_end_time" name="evt_end_time" style="width:7em;" value = "$event_end_time">
<input id="postendtm" type="radio" name="posttime" value="end">
<span style="width:25%;text-align:right;font-size:12px;vertical-align:top">time to</span>
</div>
</div>
</td></tr></table>
</div>

<div style="margin-left: 0px; margin-bottom: 0px;width:190px;float:right" id="zcalendar-container">
</div>

</div>
<br style="clear:both" />

Note at the end of this snipet is the container for the calendar widget. It has an id of "zcalendar-container" in my example. Change the "zcalendar" part to whatever you renamed the widget calendar object to in step I.4 above.

Also note - if you really want to be strickly css driven, the table in the code above is not necessary. It just vertically centers the date/time controls with the widget. Get rid of them if you like. It won't bug me one bit.

4. Immediately below the changed code listed above, add the following code:

<script type="text/javascript">

</script>

Again, the label "zcalendar", where ever it occurs, should be replaced with your own label.

The next line few lines after these code changes should read:

p1

$return_text .=<<p1;
<div style="float:right;width:20%;">
<div class="icon_preview_box" style="float:left;">
...and so on.

Make sure you did not over write the "p1" line or you really will get things messed up.

5. In the file us_english.pl, add a line in the language section that reads:

$lang{event_end_time} = "End Time:";

That's it! There are alternative ways to put in the code changes. But that is another topic. This works just fine even if it does replace a good chunk of original code. As always, back everything up before you begin and you will have no worries. Good luck. As mentioned before, the display has been checked out in Firefox 1 and IE 6.

gengwall · Joined: 20 Apr 2006 Posts: 23 Location: Minnesota

So, now that you have the widget installed, how does it work?

You will notice first there are some changes to the standard plans date and time entry interface (besides the widget itself, of course).

1. An "End Date" field has been added. This does nothing inherently in plans. What will happen is when an end date is entered via the widget, the "Length (in days)" field will automatically be updated.

2. Radio start/end buttons. For both the date and time, a set of radio buttons controls which field (start/end) a widget date/time goes into. This should be self explanatory.

3. Time selection. Once you start clicking on the time boxes, the minutes increment you put in plans_config.pl will be invoked. For example, if you entered "15" as the increment, times will start changing (and so will the minutes box in the widget) at quarter hour intervals. The hours do not update once you go past 45 minutes (in my example). The minutes just turn back over to 00 again. So, in essense, the hour and minute boxes, and the am/pm box for that matter, are all independent of each other. Note also that once the minutes increment is involved, it will always round up to the next interval - not necessarily the interval closest to the actual minutes displayed in the widget. For example, with a 15 minute increment, both 1 minute after the hour and 14 minutes after the hour will change to 15 minutes after the hour once the minutes box is clicked.

All other instructions on the widget can be found in it's documentation.

rfthomas · Joined: 22 Mar 2006 Posts: 22

I am not sure what I have done wrong, but i do not get the widget. I have repeated the steps and still do not get it

http://www.cornerstoneconsultants.org/new/plans/plans.cgi?active_tab=1

Any suggestions?

gengwall · Joined: 20 Apr 2006 Posts: 23 Location: Minnesota

A couple things to try.

First, I forgot one small thing in the instructions.

In the file us_english.pl, add a line in the language section that reads:

$lang{event_end_time} = "End Time:";

This impacts the formatting of the controls though, not the display of the widget.

I think the problem is in the entry in plans_config.pl For some reason it is not being read correctly by the setup javascript (it is showing up as blank). Therefore, the setup javascript is blowing up before the widget can be rendered.

This is the entry from step II.1. The first thing I would check is that the line I have posted here was pasted as a single line in plans_config. The forum post wraps the line but it really should be just one line. Check that first. Also make sure that there is an actual value and that it is between 1 and 60. (It really needs to be a value that divides equally into 60. The valid values really are: 1,2,3,4,5,6,10,12,15,20,30,60)

Let's try those and see if it works. If not, we'll dig deeper.

p.s. another thought: When you add that $options{event_time_inc} parm to the other options section in plans_config.pl, make sure that it is before the "return 1;" statement. Also make sure the "return 1;" statement still is the last statement in plans_config.pl

rfthomas · Joined: 22 Mar 2006 Posts: 22

OK, I made sure the modifications to plans.template (made sure the line did not wrap and that the "return 1" statement is still at the end). It didn't seem to make any difference.

Also, I am unsure where in the language file the command should be added. Where is the "language section"?

Still perplexed.

gengwall · Joined: 20 Apr 2006 Posts: 23 Location: Minnesota

gengwall · Joined: 20 Apr 2006 Posts: 23 Location: Minnesota

gengwall · Joined: 20 Apr 2006 Posts: 23 Location: Minnesota

I guess we should go through everything in steps. The first thing I woudl do is double check each of the four widget files to make sure the change from "calendar" to "zcalendar" was made.

Those files are the same four you put in the head section of plans.template:

calendar.js
calendar-setup.js
calendar-green.js
lang/calendar-en.js

Do a search on "calendar" and make sure every entry in each file has the "z" appended to the front (even the comments - it won't hurt anything). One subtle thing I noticed - the search and replace should NOT be case sensitive. i.e. you want to change every entry of both "calendar" and "Calendar" to "zcalendar" (all lower case).

Let me know how that goes.

(FYI - I also need to add a couple changes to the css file. I am sorting those out and will list them soon. It doesn't stop the widget from displaying but it doesn't display right. I can't remember the exact changes I originally made so I have to do a side by side comparison.)

rfthomas · Joined: 22 Mar 2006 Posts: 22

Got it going! I had uploaded the calendar files in ascii mode. Now the only problem is alignment. If you look you will see things are kinda spread out. Can I fix that?

http://www.cornerstoneconsultants.org/new/plans/plans.cgi?active_tab=1.

Also, how do I get the time on the widget to display in am & pm (or will it?).

rfthomas · Joined: 22 Mar 2006 Posts: 22

Never mind the am & pm question....it would help if I would dig a little.

gengwall · Joined: 20 Apr 2006 Posts: 23 Location: Minnesota

Whew! That is spread out. I had similar problems with the dhtml in mine, but since I was already running less than full screen width, it wasn't so pronounced. I originally had the thing in tables and then could control it a lot more, but the idea is to make it all css driven without tables so it complies with xhtml, etc. Start by changing the width in the inline style of the main div (the first one) for this section. Right now it reads:

<div style="width:85%;float:right;">

Try changing it to a fixed width of "500px" and then add a right margin to move it toward the middle. See how that works. You could just lower the percent but I am afraid it might mess up if people do not have the window maximized or run lower screen resolutions. Here is a revised div tag with those changes:

<div style="width:500px;float:right;margin-right:20px;">

Again, this is the very first line of the new date/time selection code.

You also may need to add the following line after the selection div but before the javascript. (I actually should have included this as part of the code in step II.3.)

<br style="clear:both" />

This ensures that the icon selector and background selector stay underneath the date/time selection area.

I noticed the "End date:" label still isn't there either. Did you get that put into us_english.pl? That should help with the layout on the form field side.

Looks like you are getting pretty close. Thanks for being the guinee pig for this install. I have been modifying the instructions as we go along, based soley on your experience Wink

rfthomas · Joined: 22 Mar 2006 Posts: 22

That worked...I kinda juggled the numbers to get it where I wanted it. I am still having trouble with the word "post" in the time section.

BTW, you never mentioned the "End Date" label until the last post. I figured out what you were talking about. You mentioned the "End Time" label previously.

I am pleased...thanks for your help. If I can help lemme know!

gengwall · Joined: 20 Apr 2006 Posts: 23 Location: Minnesota