Instructions d'utilisation :
Le programme est relativement simple et il y a des instructions dans le code Voici comment l'utiliser.
La première étape consiste à instancier un calendrier et à définir les paramètres.
Description du paramètre :
Année : l'année à afficher
Mois : le mois à afficher
SelectDay : sélectionner la date
onSelectDay : déclencher à la date sélectionnée
onToday : déclencher à la date d'aujourd'hui
onFinish : Déclenché après le tracé du calendrier
Généralement, SelectDay est défini sur la date sélectionnée, et une fonction est définie dans onSelectDay pour définir le style de cette date
Par exemple. , dans l'exemple, SelectDay est défini sur aujourd'hui Le 10 du mois et le style est défini sur onSelect ce jour-là :
SelectDay: new Date().setDate(10), onSelectDay: function(o){ o.className = "onSelect"; },
Et onToday est utilisé pour définir le style de la date d'aujourd'hui,
Par exemple, dans l'exemple, le style de la date d'aujourd'hui est défini sur onToday :
onToday: function(o){ o.className = "onToday" },
Dans onFinish, vous pouvez mettre le programme cela doit définir le calendrier.
Vous pouvez obtenir l'année et le mois affichés par le calendrier actuel via this.Year et this.Month.
Les dates avec des données sont également définies ici. Par exemple, dans l'exemple, il y a une liste de dates avec des données dans le mois en cours, puis les dates correspondantes sont définies en fonction de cette liste :
var flag = [10,15,20]; for(var i = 0, len = flag.length; i < len; i++){ this.Days[flag[i]].innerHTML = "<a href='javascript:void(0);' onclick=\"alert('日期是:"+this.Year+"/"+this.Month+"/"+flag[i]+"');return false;\">" + flag[i] + "</a>"; }
Exemple Cette liste de dates est fixe. Dans les applications réelles, la liste de dates correspondante peut être obtenue en fonction de l'année et du mois
Je recommande personnellement d'utiliser l'année et le mois pour l'obtenir via ajax.
Il existe également deux méthodes utiles dans le programme : PreMonth (affiche le mois précédent) et NextMonth (affiche le mois suivant).
Code de test :
Pour plus d'articles liés au nouvel algorithme de contrôle de calendrier de style blog JavaScript, veuillez faire attention au site Web PHP chinois !