Pour ceux qui sont familiers avec le calendrier Zabuto, si vous définissez la variable de date d'aujourd'hui sur true, alors le calendrier commence le mois "aujourd'hui" et affiche l'icône sur la date. Tout cela, je travaille comme je le demande, sauf à une question future, je veux pouvoir ajouter une URL à la fenêtre contextuelle lors du choix d'un événement. Cependant cette question, je veux être en mesure d'afficher des mois limités spécifiques sur une page séparée. Par exemple, la date d'aujourd'hui est le 22 juin, mais sur une page Web distincte, je voudrais afficher les mois de novembre et décembre et l'année spécifique uniquement sans la date d'aujourd'hui. Je ne sais pas par où commencer, donc je n'ai aucun code à afficher autre que celui que j'ai utilisé sur le site Web de zabuto. C'est la route que j'ai empruntée dans un script java.
le nom de classe "code" que j'ai dans mon css pour les couleurs, mais ce n'est pas vraiment pertinent, car je ne veux que 2 mois sur une page séparée mais en accédant aux données du fichier js unique comme vous voyez une version de données raccourcie ci-dessous
var eventData = [
{"date":"2018-10-02","badge":false,"title":"private party","body":"private fun
{"date":"2019-12-25","badge":false,"title":"Christmas Day","body":"Christmas Lunch","footer":"all night","status":"100%","classname":"grad100"},
{"date":"2019-12-26","badge":false,"title":"Boxing Day","body":"Boxing Day Lunch","footer":"all night","status":"100%","classname":"grad100"},
{"date":"2019-12-31","badge":false,"title":"New Years Eve","body":"Bringing in the New Year of 2020","footer":"all night","status":"75%","classname":"grad75"}
];
$(document).ready(function() {
$("#my-calendar").zabuto_calendar({
action: function(event) {
console.log(event)
return myDateFunction(this.id, false);
},
action_nav: function() {
return myNavFunction(this.id);
},
data: eventData,
modal: true,
/* The legend
legend: [
{type: "text", label: "Special event", badge: "00"},
{type: "block", label: "Regular event"}
]
*/
});
$("#date-popover").click(function() {
$("#date-popover").hide();
});
function myDateFunction(id, fromModal) {
console.log({
id
})
if (fromModal) {
$("#" + id + "_modal").modal("hide");
}
var date = $("#" + id).data("date");
var eventItem = eventData.find(function(item) {
return item.date === date;
})
if (!eventItem && !eventItem) {
return false;
}
$("#date-popover .popover-content").text(eventItem.date+" which is a "+eventItem.title+"\n This is a "+eventItem.body+"\n we are currently "+eventItem.status+".")
$("#date-popover").show();
}
function myNavFunction(id) {
$("#date-popover").hide();
var nav = $("#" + id).data("navigation");
var to = $("#" + id).data("to");
}
});
3 Réponses :
ok trié mais je dois créer un nouveau js avec quelques changements pour changer le jour, le mois et quelques autres choses
Voulez-vous compléter votre réponse?
wow c'était il y a près d'un an, je pensais y avoir répondu. J'ai fait une copie du fichier JS original, puis j'ai changé la date d'aujourd'hui pour l'enlever, puis j'ai ajouté un mois de début de novembre et je ne l'ai autorisé que sur un mois. de cette façon, il utilise toujours les données d'origine de toutes les fonctions et informations du calendrier principal, donc maintenant j'ai deux fichiers JS zabuto, mais un fichier de données js. J'en avais besoin l'année dernière et personne ne semblait vouloir m'aider ni le savoir peut-être.
La bonne façon d'y parvenir est d'utiliser l'option month lors de l'initialisation du calendrier.
Cela n'a pas été documenté par le développeur de Zabuto Calendar, ce qui est un peu bizarre, mais cela fonctionne bien. Vous remplacez simplement la valeur par défaut dans la bibliothèque comme suit:
$('#my-calendar').zabuto_calendar({
language: "en",
data: eventData,
month : 7, // Put the number of the month you want to start with
action: function() { myDateFunction(this.id); }
});
Je peux même définir une année spécifique!
$('#my-calendar').zabuto_calendar({
language: "en",
data: eventData,
year: 2018, // <-- here :)
month: 7, // Put the number of the month you want to start with
...
});