Calendar

This calendar shows your appointments of the month. Numbers of days with appointments are represented in bold. The current day is represented in a solid brown cell. For each appointment, the time and the subject are shown.

As usual, you can change the values of the model section and test the effect of these changes in the view. Please, change only the values of the declared variables. For example, you can change the current day, or add more appointments in the calendar. Read the explanations in the model section in order to understand the used data structures.

The view

$monthT$, $year$
$e$
$day$
$e.time$ - $e.subject$
 

The model used in the example

We use Entry objects in order to model appointments. The Entry constructor function is defined in the init block. Each appointment has a time and a subject.

The calendar is a map of days (map keys) and arrays of Entry objects. Only days with appointments appear in the calendar.

If you want to add appointments to a certain day,

<script yst="init">
  // Init block 
  function Entry(time,subject) {
  	this.time = time;
  	this.subject = subject;
  }
  headings = ['M','Tu','W','Th','F','Sa','Su'];
</script>
<script yst="model">
// Model section  
today = 14;
month = 7;
monthT = 'July'
year = 2009;

calen = {6:[new Entry('9:00-9:15','Pick Ann up')], 
         9:[new Entry('8:15-9:00','Meeting'),new Entry('9:00-9:00','Cofee-break')]
        }
firstDayOrdinal = 2;
numberOfDays = 31;

// Auxiliar variables
numberOfWeeks = Math.ceil((numberOfDays - (7 - firstDayOrdinal)) / 7) + 1;	
</script>

The Yeast code

For the calendar construction we use a process similar to the matrix sample (study it before to understand a matrix representation).

In first place we represent the calendar heading iterating over the values of the headings array: <td yst="apply" ystSet="headings" width="14%" class="cal_heading">$e$</td>

Using an apply we create a table row for each week (ystUpTo=numberOfWeeks): <tr height="90" yst="apply" ystUpTo="numberOfWeeks" valign="top" ystAux="$# week = i$">. For the sake of convenience we define an auxiliary variable (week) that holds the week ordinal.

An inner apply would iterate over the week days, obviously 7 days per week. Using an auxiliary variable we compute the day number (ystaux="$# day = week*7+i-firstDayOrdinal+1$"). The day variable will range from negative values to values greater than 31 depending on the week number. Depending on the day value we determine that the day cell corresponds to a calendar day or not. To make this distinction we use a compApply instead of an apply for the week day cells:

We show the appointments only in the case they exist (<div yst="if" ystTest="calen[day]!=null">). To include appointments in the cell we iterate over the Entry objects corresponding to the calendar entry for that day: <div yst="apply" ystSet="calen[day]">$e.time$ - $e.subject$</div>

Pay attention on the cell styles. The day cell that corresponds to the current day is colored in solid brown. We represent day cells with appointments with salmon-colored background color and with the day number figure in bold type. The style determination is performed using the class attribute and Yeast expressions based on the value of model and auxiliary variables (this code is highlighted in green).