brospars / simple-calendar

Simple calendar jquery plugin
https://brospars.github.io/simple-calendar
MIT License
49 stars 38 forks source link

Add option to disable dates #13

Closed brospars closed 4 years ago

brospars commented 4 years ago

The plugin is still useful on today's era,who wants simple integration,can we have option to add disabled dates? as I see a relevant class is added - .wrong-month Requirement is simple,I would like to show all dates of a month disabled unless it's not in the event list array unlike now showing enabled all the dates.

$("#event-cal-container").simpleCalendar({ //disabled : true,//this feature we are looking for events: ['2019-03-04', '2019-03-08', '2019-03-12', '2019-03-15'], eventsInfo: ['John\'s Birthday', 'Janet\'s Marriage','Graduation Day', 'Final Exams !'], selectCallback: function(date){ console.log('date selected '+date); }, insertCallback: function(date){ //console.log('date selected '+date); } });

Originally posted by @findela in https://github.com/brospars/simple-calendar/issues/4#issuecomment-578636377

brospars commented 4 years ago

@findela : If what i understand is correct, you want to disable the current month days, where there is no events.

chrome_LxB25p71hA

This can be done easily by modifying the code like

$("#event-cal-container").simpleCalendar({
                enableOnlyEventDays: true, // only enable event days
                fixedStartDay: false, ....

inside jquery.simple-calendar.js

add to plugin defaults

var pluginName = "simpleCalendar",
        defaults = {
            months: ....
            enableOnlyEventDays: false, // only enable event days
           ....
        };

added disabled class for non-event, in-this-month days

                       if (eventIndex !== -1) {
                            td.find(".day").addClass("event");
                        } else if(plugin.settings.enableOnlyEventDays) {
                            // disable the non event days (of this month)
                            if (day.getMonth() == fromDate.getMonth()) {
                                td.find(".day").addClass("disabled");
                            }
                        }

added style for class disabled, to make it different from wrong month

.calendar .day.disabled {
      background: rgb(240, 240, 240);
      color: rgb(182, 182, 182); }
  .calendar .day.disabled:hover{
    border: none;
  }

Hope that's what you want :)

Originally posted by @monsterbrain in https://github.com/brospars/simple-calendar/issues/4#issuecomment-579076005

brospars commented 4 years ago

I added 2 options to disable click on empty dates and event details and a css class .disabled. Customizing is up to you.