Open victor-chauzov opened 3 years ago
Trying to repeat Custom Calendars as shown at https://vcalendar.io/ Re-read the documentation, studied the example https://github.com/nathanreyes/v-calendar/blob/master/docs/.vuepress/components/homepage/custom-calendar.vue , read: #756 But it didn't work out.
1) npm install v-calendar
2) main.js: import VCalendar from 'v-calendar'
3) *.vue
@Svarogbog thanks for sharing. I formatted it below, and made one small change because in your version the weekend days are not correctly coloured
CSS version
<style> .scrollbar { width: 0px; } .scrollbar-track { display: none; } .custom-calendar.vc-container { border-radius: 0; width: 100%; } .custom-calendar.vc-container .vc-header { background-color: #f1f5f8; padding: 10px 0; } .custom-calendar.vc-container .vc-weeks { padding: 0; } .custom-calendar.vc-container .vc-weekday { background-color: #f8fafc; border-bottom: 1px solid #eaeaea; border-top: 1px solid #eaeaea; padding: 5px 0; } .custom-calendar.vc-container .vc-day { padding: 0 5px 3px 5px; text-align: left; min-height: 90px; min-width: 90px; overflow: auto; background-color: white; } .custom-calendar.vc-container .vc-day.weekday-1, .custom-calendar.vc-container .vc-day.weekday-7 { background-color: #eff8ff; } .custom-calendar.vc-container .vc-day:not(.on-bottom) { border-bottom: 1px solid #b8c2cc; } .custom-calendar.vc-container .vc-day:not(.on-bottom).weekday-1 { border-bottom: 1px solid #b8c2cc; } .custom-calendar.vc-container .vc-day:not(.on-right) { border-right: 1px solid #b8c2cc; } .custom-calendar.vc-container .vc-day-dots { margin-bottom: 5px; } </style>
SCSS version
<style lang="scss"> $day-border: 1px solid #b8c2cc; $day-border-highlight: 1px solid #b8c2cc; $day-width: 90px; $day-height: 90px; $weekday-bg: #f8fafc; $weekday-border: 1px solid #eaeaea; .scrollbar { width: 0px; } .scrollbar-track { display: none; } .custom-calendar.vc-container { border-radius: 0; width: 100%; .vc-header { background-color: #f1f5f8; padding: 10px 0; } .vc-weeks { padding: 0; } .vc-weekday { background-color: $weekday-bg; border-bottom: $weekday-border; border-top: $weekday-border; padding: 5px 0; } .vc-day { padding: 0 5px 3px 5px; text-align: left; min-height: $day-height; min-width: $day-width; overflow: auto; background-color: white; &.weekday-1, &.weekday-7 { background-color: #eff8ff; } &:not(.on-bottom) { border-bottom: $day-border; &.weekday-1 { border-bottom: $day-border-highlight; } } &:not(.on-right) { border-right: $day-border; } } .vc-day-dots { margin-bottom: 5px; } } </style>
Trying to repeat Custom Calendars as shown at https://vcalendar.io/ Re-read the documentation, studied the example https://github.com/nathanreyes/v-calendar/blob/master/docs/.vuepress/components/homepage/custom-calendar.vue , read: #756 But it didn't work out.
1) npm install v-calendar
2) main.js: import VCalendar from 'v-calendar'
3) *.vue
@Svarogbog thanks for sharing. I formatted it below, and made one small change because in your version the weekend days are not correctly coloured
CSS version
SCSS version