retour au cours

Créer un calendrier

importance: 4

Écrivez une fonction createCalendar(elem, year, month).

L’appel doit créer un calendrier pour l’année/le mois donné et le mettre dans elem.

Le calendrier doit être un tableau, où une semaine est un <tr> et un jour est un <td>. Le dessus du tableau doit être un <th> avec les noms des jours de la semaine : le premier jour doit être le lundi, et ainsi de suite jusqu’au dimanche.

Par exemple, createCalendar(cal, 2012, 9) devrait générer dans l’élément cal le calendrier suivant :

P.S. Pour cette tâche, il suffit de générer le calendrier, il ne doit pas encore être cliquable.

Open a sandbox for the task.

Nous allons créer le tableau sous forme de chaîne de caractères : "<table>...</table>", puis l’affecter à innerHTML.

L’algorithme :

  1. Créer l’en-tête du tableau avec les noms <th> et les jours de la semaine.
  2. Créez l’objet de date d = new Date(year, month-1). C’est le premier jour de month (en tenant compte du fait que les mois en JavaScript commencent à 0, pas à 1).
  3. Les premières cellules jusqu’au premier jour du mois d.getDay() peuvent être vides. Remplissons-les avec <td></td>.
  4. Augmentez le jour en d: d.setDate(d.getDate()+1). Si d.getMonth() n’est pas encore le mois suivant, alors ajoutez la nouvelle cellule <td> au calendrier. Si c’est un dimanche, ajoutez une nouvelle ligne “</tr><tr>”.
  5. Si le mois est terminé, mais que la ligne du tableau n’est pas encore pleine, ajoutez-y un <td> vide pour le rendre carré.

Ouvrez la solution dans une sandbox.