vue-simple-calendar icon indicating copy to clipboard operation
vue-simple-calendar copied to clipboard

Prettier optional theme

Open richardtallent opened this issue 7 years ago • 2 comments

Theming ideas:

  • Keep the default (no theme) CSS as basic as possible.
  • Add a new optional theme that has more pizazz -- holiday background colors, prettier header, etc. Perhaps inspired by Material
  • Add more flexibility to slot or have external class control over the buttons in the header, so calling apps can easily style the navigation to match the feel of the rest of their application.

richardtallent avatar Nov 12 '17 19:11 richardtallent

I had already started on an alternate theme styled after macOS's Calendar app. See my demo-alternate-styling branch.

screen shot 2017-11-12 at 10 41 25 pm

I started on this in order to figure out if any of the component markup needed to be reorganized to better support theming. I only came across one necessary change so far, the currentMonth button. There are some other things that could be added to support the theme a bit better, but they would require some involved changes, like supporting times.

Note: I'm switching the styles to SASS so you'll need to install a couple dependencies:

npm install node-sass --dev
npm install sass-loader --dev

houseoftech avatar Nov 12 '17 21:11 houseoftech

I like it so far! If we can create themes that roughly mimic Google Calendar's new design, Outlook online, and Apple Calendar, I'd say we've achieved a pretty decently theme-able component.

richardtallent avatar Nov 30 '17 05:11 richardtallent