Dynamic Disabled Calendar Framework7

Questions
1

How to update the created calendar, disabling with dynamic dates.

I have the following situation I create the standard framework7 calendar and then I want to update it dynamically disabling the days that will be passed, is it possible?

I am trying to update the calendar through a vue “watch” event.

watch: {

selectCompany() {

  var arrayDays = [

    "domingo",

    "segunda",

    "terca",

    "quarta",

    "quinta",

    "sexta",

    "sabado",

  ]

  var company = this.$store.getters.company[this.selectCompany];

  var daysWork = company.workday;

  daysWork = daysWork.toLowerCase();

  daysWork = daysWork.replace(/[ç]/,"c").replace(/[àáâãäå]/,"a").replace(/[-]/,"");

  daysWork = daysWork.replace("-feira","");

  daysWork = daysWork.replace("feira","");

  daysWork = daysWork.split(" ");

  

  console.log(daysWork);

  

  var daysDisabled = [];

  var daysIndex = [];

  //GET AND SET INDEX DAYS WORK

  daysIndex.push(arrayDays.indexOf(daysWork[0]));

  daysIndex.push(arrayDays.indexOf(daysWork[2]));

  //GET AND SET DAYS DISABLED

  if (daysIndex[0] !== -1 && daysIndex[1] !== -1){

    for (let i = 0; i < arrayDays.length; i++){

      if (i < daysIndex[0] || i > daysIndex[1]){

        daysDisabled.push(i);

      }

    }

  }

  console.log(daysDisabled);

  this.calendarInline.params.disabled(date) {

    return daysDisabled.indexOf(date.getDay()) >= 0;

  };

  this.calendarInline.update();

}

},

mounted() {
const self = this;
const app = self.$f7;
var $$ = Dom7;
var selected;
var monthNames = [
  "Janeiro",
  "Fevereiro",
  "Março",
  "Abril",
  "Maio",
  "Junho",
  "Julho",
  "Agosto",
  "Setembro",
  "Outubro",
  "Novembro",
  "Dezembro",
];
this.calendarInline = app.calendar.create({
    containerEl: "#demo-calendar-inline-container",
    value: [new Date()],
    // disabled(date) {
    //   return daysDisabled.indexOf(date.getDay()) >= 0;
    // },
    // minDate: new Date(),
    renderToolbar: function () {
      return (
        '<div class="toolbar calendar-custom-toolbar no-shadow">' +
        '<div class="toolbar-inner">' +
        '<div class="left">' +
        '<a href="#" class="link icon-only"><i class="icon icon-back ' +
        (app.theme === "md" ? "color-black" : "") +
        '"></i></a>' +
        "</div>" +
        '<div class="center"></div>' +
        '<div class="right">' +
        '<a href="#" class="link icon-only"><i class="icon icon-forward ' +
        (app.theme === "md" ? "color-black" : "") +
        '"></i></a>' +
        "</div>" +
        "</div>" +
        "</div>"
      );
    },
    on: {
      init: function (c) {
        $$(".calendar-custom-toolbar .center").text(
          monthNames[c.currentMonth] + ", " + c.currentYear
        );
        $$(".calendar-custom-toolbar .left .link").on("click", function () {
          calendarInline.prevMonth();
        });
        $$(".calendar-custom-toolbar .right .link").on("click", function () {
          calendarInline.nextMonth();
        });
        $$(".calendar-day-today").removeClass(
          "calendar-day-selected calendar-day-disabled"
        );
      },
      monthYearChangeStart: function (c) {
        $$(".calendar-custom-toolbar .center").text(
          monthNames[c.currentMonth] + ", " + c.currentYear
        );
      },
      dayClick: function (calendar, dayEl, year, month, day) {
        selected = {
          day: day,
          month: month,
          year: year,
        };
        var currentDay = $$(".calendar-day-today"); //current day
        currentDay.removeClass("calendar-day-disabled");

        dateSelected(selected);
      },
    },
  });
function dateSelected(selected) {
  self.selected(selected);
}

}

1 Like
2

im having the same issue , did you solve it ?

3

Yes. I solved this problem with this solution:

With the calendar property created I dynamically set the date, like this:

disabled(date) {
return [0,6].indexOf(date.getDay()) >= 0;
},

You can place this property within the app.calendar.create method of the calendar.

And to change after an event:

this.calendarInline.params.disabled = function(date){
return [0,6].indexOf(date.getDay()) >= 0;
}; //Changing the date dynamically in a calendar property that I define.

  this.calendarInline.update(); // Updating the calendar to get the disabled dates.

This was my solution, see if it meets what you need.

1 Like
4

thank you , this is exactly what i did ,
but in my case it updates even tho i didnt use the last line this.calendarInline.update();
mybe because im using f7 react it automatically re renders