Let's see a subtlety (which is less obvious when scrolling through the code than looking at the user interface): there are two separate dropdown menus with their own populating arrays representing the month. The reason for this is that in one case, there is supposed to be a choice, not only between specific months, but also between specifying one month only and all months. That menu includes an option of [-1, "Every Month"].

The other example is for the (optionally specified) end date for a series of calendar entries. This is a use case where it does not really make sense to specify that something ends every month. The intended use is to give the day, month, and year on which something stops displaying. The combination of these two use cases makes for two separate, non-cookie-cutter ways of choosing a month. The more exclusive could be gotten from the more inclusive with an array.slice(1) function, but we are again going for Rincewind-style, boring code:

      var month_occurrences = [[0, 'January'],
        [1, 'February'],
        [2, 'March'],
        [3, 'April'],
        [4, 'May'],
        [5, 'June'],
        [6, 'July'],
        [7, 'August'],
        [8, 'September'],
        [9, 'October'],
        [10, 'November'],
        [11, 'December']];
      var month_occurrences_with_all = [[-1, 'Every Month'],
        [0, 'January'],
        [1, 'February'],
        [2, 'March'],
        [3, 'April'],
        [4, 'May'],
        [5, 'June'],
        [6, 'July'],
        [7, 'August'],
        [8, 'September'],
        [9, 'October'],
        [10, 'November'],
        [11, 'December']];

These are baked into two separate arrays in a user interface that is slowly built up to calendar "entry-ually" include the last option, a checkbox to mark that the repeating calendar entry ends on a certain date, and fields to specify which date, month, and year it ends on, drawing on the first of the two preceding arrays:

      result.push(<li>Ends on (optional): <input type="checkbox"
        name="series_ends" id="series_ends" /><ul><li>Month:
        <select id="end_month" name="end_month"
        defaultValue={month}>{months}</select></li>
        <li>End date:<select id="end_date"
        name="end_date" defaultValue={entry.date}
        >{dates}</select></li>
        <li>End year:<select id="end_year"
        name="end_year" defaultValue={entry.end_year + 1}
        >{years}</select></li></ul></li>);
      return <ul>{result}</ul>;
    },

The previous two major methods are building forms for a user to enter data. The next method switches gears somewhat; it is set to display upcoming calendar entries from the present date to a year after the last scheduled one-time calendar entry.