Style Guide

[jcanning]

Is your feature request related to a problem? Please describe

Yes, the problem is when using dark mode themes with angular material, the odd numbered times are not visible.

Describe the solution you'd like

Is is possible to get a style guide for this calendar? Overriding styles is a bit of a pain when you have to hunt down the proper styles.

Describe your use case for implementing this feature

Currently, when i use the default angular material styles the day and week view of a "Dark mode" theme does not display properly. The odd time's are not readable (see below).

Additional context

I was am looking for is the best methods to override the main style components of Angular Calendar.

[mattlewis92]

Hey, thanks for opening an issue, unfortunately the styling of this calendar really isn't the best (CSS is not my strong point at all, I mostly just cobbled together what I thought was OK CSS at the time, I kind of regret that now though 😅). Funnily enough I had to also add a dark theme to this calendar for work and it really wasn't a great experience. I'm going to work on some sass mixins (or if someone else is reading this and has amazing sass skills that would be amazing!) to make it a lot easier to theme (ala material2 style) but until then the best thing I can recommend is right click -> inspect element and copy the css specificity into your app. For the example you gave:

It would be

.cal-day-view .cal-drag-over .cal-hour-segment, .cal-day-view .cal-hour-segment:hover {
  background-color: #ededed;
}

[jcanning]

Ok, thanks Matt. If i get any good at it, i can update here with what i find out as well.

[polaroi8d]

@jcanning you find any working solution?

[mattlewis92]

WIP here: #886, any feedback if I'm on the right lines would be awesome 😄

[jcanning]

@mattlewis92 I will check this out for sure! I'm not super great with Git, how do i get your changes? Or just overwrite the files?

[mattlewis92]

I'm just looking for some early feedback right now to validate I'm on the right track, once I'm confident in the changes I'll just cut a beta release that you can install direct from npm 😄

[jcanning]

ok cool. From what i've seen it looks like what i am looking for. along with some documentation on what each class to override in the theme. Thanks for taking this on, it will go a long way in some of my projects. Your calendar is awesome!

[mattlewis92]

I've just cut a new beta with this in, you can try it in your app with:

npm i angular-calendar@next

Then in your sass you can create a new theme

@import '~angular-calendar/scss/angular-calendar.scss';

$bg-dark-primary: #1f262d;
$bg-dark-secondary: #394046;
$bg-active: #2c343a;
$text-color: #d5d6d7;
$border-color: rgba(0, 0, 0, 0.6);

// Call the calendar mixin with a sass color map of your theme. Every property is optional.
// For a list of all variables and how they are used,
// see https://github.com/mattlewis92/angular-calendar/tree/master/projects/angular-calendar/src/variables.scss
@include cal-theme(
    (
      bg-primary: $bg-dark-primary,
      bg-secondary: $bg-dark-secondary,
      weekend-color: indianred,
      bg-active: $bg-active,
      border-color: $border-color,
      gray: $bg-dark-secondary,
      today-bg: $bg-dark-secondary,
      event-color-primary: $bg-dark-secondary
    )
);

Demo code here and all available variables are here. Let me know if that works ok for you!

Preview: