{"action":"closed","issue":{"url":"https://api.github.com/repos/chmln/flatpickr/issues/1012","repository_url":"https://api.github.com/repos/chmln/flatpickr","labels_url":"https://api.github.com/repos/chmln/flatpickr/issues/1012/labels{/name}","comments_url":"https://api.github.com/repos/chmln/flatpickr/issues/1012/comments","events_url":"https://api.github.com/repos/chmln/flatpickr/issues/1012/events","html_url":"https://github.com/chmln/flatpickr/issues/1012","id":254885209,"number":1012,"title":"Set classes \"startRange\" and \"endRange\" for disabled ranges of dates","user":{"login":"rostockahoi","id":16897125,"avatar_url":"https://avatars1.githubusercontent.com/u/16897125?v=4","gravatar_id":"","url":"https://api.github.com/users/rostockahoi","html_url":"https://github.com/rostockahoi","followers_url":"https://api.github.com/users/rostockahoi/followers","following_url":"https://api.github.com/users/rostockahoi/following{/other_user}","gists_url":"https://api.github.com/users/rostockahoi/gists{/gist_id}","starred_url":"https://api.github.com/users/rostockahoi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rostockahoi/subscriptions","organizations_url":"https://api.github.com/users/rostockahoi/orgs","repos_url":"https://api.github.com/users/rostockahoi/repos","events_url":"https://api.github.com/users/rostockahoi/events{/privacy}","received_events_url":"https://api.github.com/users/rostockahoi/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-09-03T16:34:24Z","updated_at":"2017-09-19T16:45:49Z","closed_at":"2017-09-19T16:45:49Z","author_association":"NONE","body":"Hi,\r\nI want to use Flatpickr for an **appartement booking application**. I need specific CSS classes to style the check-in and check-out days accordingly as it is possible to check in for a guest on the same day another guest checked out.\r\n\r\nTo specify the already booked ranges I am using the `disable` config options in `range` mode. However, the first and last days of a selection are marked with the classes `.startRange` and `.endRange` right now. I would like to have the first and last days of a disabled range to be marked as well.\r\n\r\nI understand that we cannot just add the classes `.startRange` and `.endRange` to the disabled ranges as it would probably break the provided themes and custom themes. We could use different class names.\r\n\r\nI tried to solve the problem with CSS only: I can select the first day of a disabled range by CSS (+ selector) but unfortunately not the last day of that range.\r\n\r\nMy **proof of concept** solution is to compare every day on creation with the provided days in the `disable` config array, e.g.:\r\n\r\n``` js\r\ndisable: [\r\n        {\r\n            from: \"2017-04-01\",\r\n            to: \"2017-06-01\"\r\n        },\r\n        {\r\n            from: \"2017-09-01\",\r\n            to: \"2017-12-01\"\r\n        }\r\n    ]\r\n```\r\nI got it working by inserting some lines in the `createDay()` function:\r\n``` js\r\nfunction createDay(className, date, dayNumber, i) {\r\n  //...\r\n  if (dateIsEnabled) {\r\n    //...\r\n  } else {\r\n    dayElement.classList.add(\"disabled\");\r\n    \r\n    // my code\r\n    for (var i = 0; i < self.config.disable.length; i++) {\r\n      if ( (compareDates(date, self.config.disable[i].from)) === 0) {\r\n        dayElement.classList.add(\"startRange\");\r\n      }\r\n      if ( (compareDates(date, self.config.disable[i].to)) === 0) {\r\n        dayElement.classList.add(\"endRange\");\r\n      }\r\n    }\r\n    // end my code\r\n\r\n    if (self.selectedDates[0] && date > self.minRangeDate && date < self.selectedDates[0]) self.minRangeDate = date;else if (self.selectedDates[0] && date < self.maxRangeDate && date > self.selectedDates[0]) self.maxRangeDate = date;\r\n  }\r\n  //...\r\n}\r\n```\r\nI know, this code assumes to have `from` and `to` properties in each `disable` object. It is just a test and it is working. I don't want to use my own fork for this to work, just feels bad. So my question is:\r\n\r\n**Could this somehow become a feature?** Does anyone want this to work? I would try to provide a pull request for this."}}
{"actor":{"display_login":"rostockahoi"}}