{"id":4061,"date":"2022-09-28T15:18:34","date_gmt":"2022-09-28T06:18:34","guid":{"rendered":"https:\/\/blog.wsd.sh\/?p=4061"},"modified":"2022-10-02T07:36:47","modified_gmt":"2022-10-01T22:36:47","slug":"materialui-3-month-calendar-with-wednesdays-as-regular-holidays","status":"publish","type":"post","link":"https:\/\/blog.wsd.sh\/?p=4061","title":{"rendered":" MaterialUI: 3-month calendar with Wednesdays as regular holidays<\/small>"},"content":{"rendered":"

1. 3-month calendar with Wednesdays as regular holidays
\n– use calendar-picker
\nreference: https:\/\/mui.com\/x\/api\/date-pickers\/calendar-picker\/<\/a><\/p>\n

2. Results display
\n\"\"<\/p>\n

3. Modules
\n@mui\/material@5.10.3
\n@mui\/x-date-pickers@5.0.0-beta.7
\nreact@18.2.0<\/p>\n

4. Contents
\n(1) Day of the week character change
\n(2) Change header style
\n(3) DefaultCalendarMonth
\n(4) Wednesdays as regular holidays
\n(5) DisablePast and max Date
\n(6) All code
\n(7) Note<\/p>\n

5. Day of the week character change<\/p>\n

\r\nconst formatter = (day) => {\r\n  const days = {'Su':'Sun','Mo':'Mon','Tu':'Tue','We':'Wed','Th':'The','Fr':'Fri','Sa':'Sat'};\r\n  return days[day];\r\n}\r\n\r\ndayOfWeekFormatter={(day) => formatter(day)}\r\n<\/pre>\n
6. Change style
\n– year and month in header are hidden
\n– color sunday:red, saturday; blue<\/p>\n
\r\nconst StyledCalendarPicker = styled(CalendarPicker)(({ theme }) => ({\r\n  '& .css-nk89i7-MuiPickersCalendarHeader-root': {\r\n    display: 'none'\r\n  },\r\n  '& .css-qklzlb-MuiDayPicker-header' :{\r\n    backgroundColor: '#ababab',\r\n  },\r\n  '& .css-raiqh1-MuiTypography-root-MuiDayPicker-weekDayLabel': {\r\n    color: 'white',\r\n    fontSize: '13px',\r\n  },\r\n  '& .css-raiqh1-MuiTypography-root-MuiDayPicker-weekDayLabel:first-of-type': {\r\n    color: 'red',\r\n  },\r\n  '& .css-raiqh1-MuiTypography-root-MuiDayPicker-weekDayLabel:last-of-type': {\r\n    color: 'blue',\r\n  },\r\n  '& .css-bkrceb-MuiButtonBase-root-MuiPickersDay-root': {\r\n    width: '36px',\r\n  }\r\n}));\r\n<\/pre>\n
7. DefaultCalendarMonth<\/p>\n
\r\n  const date0 = dayjs();\r\n  const date1 = dayjs().add('1', 'M');\r\n  const date2 = dayjs().add('2', 'M');\r\n\r\n  defaultCalendarMonth={date0}\r\n\r\n  defaultCalendarMonth={date1}\r\n\r\n  defaultCalendarMonth={date2}\r\n<\/pre>\n
8. Wednesdays as regular holidays<\/p>\n
\r\nconst isWeekend = (date: Dayjs) => {\r\n  const day = date.day();\r\n\r\n  return day == 3;\r\n};\r\n\r\nshouldDisableDate={isWeekend}\r\n<\/pre>\n
9. DisablePast and max Date<\/p>\n
\r\ndisablePast={true}\r\n\r\nmaxDate={date2}\r\n<\/pre>\n
10. All code<\/p>\n
\r\nimport * as React from 'react';\r\nimport dayjs, { Dayjs } from 'dayjs';\r\nimport TextField from '@mui\/material\/TextField';\r\nimport { AdapterDayjs } from '@mui\/x-date-pickers\/AdapterDayjs';\r\nimport { LocalizationProvider } from '@mui\/x-date-pickers\/LocalizationProvider';\r\nimport { CalendarPicker } from '@mui\/x-date-pickers\/CalendarPicker';\r\nimport { styled } from '@mui\/material\/styles';\r\n\r\n\r\nconst StyledCalendarPicker = styled(CalendarPicker)(({ theme }) => ({\r\n  '& .css-nk89i7-MuiPickersCalendarHeader-root': {\r\n    display: 'none'\r\n  },\r\n  '& .css-qklzlb-MuiDayPicker-header' :{\r\n    backgroundColor: '#ababab',\r\n  },\r\n  '& .css-raiqh1-MuiTypography-root-MuiDayPicker-weekDayLabel': {\r\n    color: 'white',\r\n    fontSize: '13px',\r\n  },\r\n  '& .css-raiqh1-MuiTypography-root-MuiDayPicker-weekDayLabel:first-child': {\r\n    color: 'red',\r\n  },\r\n  '& .css-raiqh1-MuiTypography-root-MuiDayPicker-weekDayLabel:last-child': {\r\n    color: 'blue',\r\n  },\r\n  '& .css-bkrceb-MuiButtonBase-root-MuiPickersDay-root': {\r\n    width: '40px',\r\n  }\r\n}));\r\n\r\nconst isWeekend = (date: Dayjs) => {\r\n  const day = date.day();\r\n\r\n  return day == 3;\r\n};\r\n\r\nconst Y_FORMAT = \"YYYY\"\r\nconst M_FORMAT = \"M\"\r\n\r\nexport default function StaticDatePickerLandscape() {\r\n\r\n  const [value, setValue] = React.useState(null);\r\n\r\n  const handleOnChange = (newValue) => {\r\n    console.log(newValue.$y + \"-\" + (newValue.$M + 1) + \"-\" + newValue.$D);\r\n  }\r\n\r\n  const formatter = (day) => {\r\n      const days = {'Su':'Sun','Mo':'Mon','Tu':'Tue','We':'Wed','Th':'The','Fr':'Fri','Sa':'Sat'};\r\n\r\n      return days[day];\r\n  }\r\n\r\n  const date0 = dayjs();\r\n  const date1 = dayjs().add('1', 'M');\r\n  const date2 = dayjs().add('2', 'M');\r\n\r\n  const Y0 = date0.format(Y_FORMAT);\r\n  const M0 = date0.format(M_FORMAT);\r\n  const Y1 = date1.format(Y_FORMAT);\r\n  const M1 = date1.format(M_FORMAT);\r\n  const Y2 = date2.format(Y_FORMAT);\r\n  const M2 = date2.format(M_FORMAT);\r\n\r\n  const HEADER_PADDING = '0px 80px 0px 110px';\r\n\r\n  return (\r\n    <LocalizationProvider dateAdapter={AdapterDayjs}>\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <td style={{ textAlign: 'center' }}>\r\n              <span style={{ padding: HEADER_PADDING }}>\r\n                {M0}\r\n              <\/span>\r\n              <small>{Y0}<\/small>\r\n            <\/td>\r\n            <td style={{ textAlign: 'center' }}>\r\n              <span style={{ padding: HEADER_PADDING }}>\r\n                {M1}\r\n              <span>\r\n              <small>{Y1}<\/small>\r\n            <\/td>\r\n            <td style={{ textAlign: 'center' }}>\r\n              <pan style={{ padding: HEADER_PADDING }}>\r\n                {M2}\r\n              <\/span>\r\n              <small>{Y2}<\/small>\r\n            <\/td>\r\n          <\/tr>\r\n        <\/thead>\r\n        <tbody>\r\n          <tr>\r\n            <td>\r\n              <StyledCalendarPicker\r\n                openTo=\"day\"\r\n                shouldDisableDate={isWeekend}\r\n                onChange={(newValue) => {\r\n                  setValue(newValue);\r\n                  handleOnChange(newValue);\r\n                }}\r\n                disablePast={true}\r\n                dayOfWeekFormatter={(day) => formatter(day)}\r\n              \/>\r\n            <\/td>\r\n            <td>\r\n              <StyledCalendarPicker\r\n                openTo=\"day\"\r\n                defaultCalendarMonth={date1}\r\n                shouldDisableDate={isWeekend}\r\n                onChange={(newValue) => {\r\n                  setValue(newValue);\r\n                  handleOnChange(newValue);\r\n                }}\r\n                disablePast={true}\r\n                disableHighlightToday={true}\r\n                dayOfWeekFormatter={(day) => formatter(day)}\r\n              \/>\r\n            <\/td>\r\n            <td>\r\n              <StyledCalendarPicker\r\n                openTo=\"day\"\r\n                defaultCalendarMonth={date2}\r\n                shouldDisableDate={isWeekend}\r\n                onChange={(newValue) => {\r\n                  setValue(newValue);\r\n                  handleOnChange(newValue);\r\n                }}\r\n                disablePast={true}\r\n                maxDate={date2}\r\n                dayOfWeekFormatter={(day) => formatter(day)}\r\n              \/>\r\n            <\/td>\r\n          <\/tr>\r\n        <\/tbody>\r\n      <\/table>\r\n    <\/LocalizationProvider>\r\n  );\r\n}\r\n<\/source>\r\n<\/pre>\n
10. Note
\n– Focus remains on calendar
\n– Please move focus to another element<\/p>\n","protected":false},"excerpt":{"rendered":"
1. 3-month calendar with Wednesdays as regular holidays – use calendar-picker reference: https:\/\/mui.com…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/4061"}],"collection":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4061"}],"version-history":[{"count":42,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/4061\/revisions"}],"predecessor-version":[{"id":4065,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/4061\/revisions\/4065"}],"wp:attachment":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4061"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4061"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}