For the more basic type of calendar entry, the kind that only happens once, we collect the date, month, and year, defaulting to the current date's values. Some things are "all-day" events for that day, such as someone's birthday; others start at a specific time. The interface could possibly be expanded to include optional end time. This functionality would be an extension of the same principles demonstrated here.
We begin to see the UI for rendering basic entries:
render_basic_entry: function(entry) {
var result = [];
var all_day = false;
var hour_options = [[0, '12AM'],
[1, '1AM'],
[2, '2AM'],
[3, '3AM'],
[4, '4AM'],
[5, '5AM'],
[6, '6AM'],
[7, '7AM'],
[8, '8AM'],
[9, '9AM'],
[10, '10AM'],
[11, '11AM'],
[12, '12PM'],
[13, '1PM'],
[14, '2PM'],
[15, '3PM'],
[16, '4PM'],
[17, '5PM'],
[18, '6PM'],
[19, '7PM'],
[20, '8PM'],
[21, '9PM'],
[22, '10PM'],
[23, '11PM']];
var hours = [];
for(var index = 0; index < hour_options.length; ++index) {
hours.push(<option
value={hour_options[index][0]}
>{hour_options[index][1]}</option>);
}The JSX here is similar to others that we have seen before; it is provided to reinforce what it would be like in a case like this:
result.push(<li><input type="checkbox" name="all_day"
id="all_day" />All day event.
<strong>—or—</strong>
<select id="hours" id="hours"
defaultValue="12">{hours}</select>:
<select id="minutes" id="minutes"
defaultValue="0">{minutes}</select></li>);We use a dropdown for the day of a month that the user selects, and try to provide a slightly nicer alternative to making a first through a 31st year round (users shouldn't be required to know which months have 30 days). We query the form's month dropdown for the month that is presently selected. As a reminder, we are aiming for compatibility with JavaScript's Date object, and while a JavaScript Date object can have a 1-based date value from 1 to at most 31, the month value is 0-based, from 0 (January) to 11 (December), and we follow this lead:
var days_in_month = null;
if (entry && entry.hasOwnProperty('month')) {
var month = entry.month;
if (document.getElementById('month')) {
month = parseInt(
document.getElementById('month').value);
}
if (month === 0 || month === 2 || month === 4 || month
=== 6 || month === 7 || month === 9 || month === 11) {
days_in_month = 31;
} else if (month === 1) {
if (entry && entry.hasOwnProperty('year') && entry.year
% 4 === 0) {
days_in_month = 29;
} else {
days_in_month = 28;
}
} else {
days_in_month = 30;
}
}
var date_options = [];
for(var index = 1; index <= days_in_month; index += 1) {
date_options.push([index, index.toString()]);
}
var dates = [];
for(var index = 0; index < date_options.length; ++index) {
dates.push(<option value={date_options[index][0]}
>{date_options[index][1]}</option>);
}
result.push(<li>Date: <select id="date" name="date"
defaultValue={entry.date}>{dates}</select></li>);
var year_options = [];
for(var index = new Date().getFullYear(); index < new
Date().getFullYear() + 100; ++index) {
year_options.push([index, index.toString()]);
}
var years = [];
for(var index = 0; index < year_options.length; ++index) {
years.push(<option value={year_options[index][0]}
>{year_options[index][1]}</option>);
}
result.push(<li>Year: <select id="year" name="year"
defaultValue={entry.years}>{years}</select></li>);
result.push(<li>Description: <input type="text"
name="description" id="description" /></li>);
result.push(<li><input type="checkbox" name="advanced"
id="advanced" onChange={this.on_change} />
Recurring event</li>);
result.push(<li><input type="submit" value="Save" /></li>);
return <ul>{result}</ul>;
},