how to change the date on zabuto calendar

Question

For those who are familiar with Zabuto calendar, if you make todays date variable true, then the calendar starts on the month of "today" and shows the icon on the date. All this i have working as i require it apart from at some future question i want to be able to add an url to the popup on choosing an event. However this question, i want to be able to show specific limited months on a seperate page. Eg todays date is June 22nd, but on a seperate webpage i would like to show november and december months and specfic year only reguardless of todays date. I have no idea where to start on this so i have no code to show other than the existing one i used on the zabuto website. This is the route i took all in a java script.

the classname "code" i have in my css for the colours, but that isnt really relevant, as i want just 2 months on a seperate page but accessing the data from the single js file as you see a shortened data version below

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");
    }

  });

Answer 1

The right way to this is use the option month when initializing the calendar.

This not documented by the developer of Zabuto Calendar, which is a bit weird, but this works well. You just override the default value in the library as follows:

$('#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); }
});

Answer 2

ok sorted it but i have to make up a new js with a few changes to change the today, month and a few other things

Answer 3

I even can set a specific year!

$('#my-calendar').zabuto_calendar({
  language: "en",
  data: eventData,
  year: 2018, // <-- here :)
  month: 7, // Put the number of the month you want to start with
  ...
});