Angular-calendar: 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: https://github.com/mattlewis92/angular-calendar/pull/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:

[jcanning]

@mattlewis92 I know this is going to boil down to my lack of scss knowledge but I am getting an error that states "@include cal-theme ... No mixin named cal-theme" at compile time.

How should i set that up? I can see it in your src/angular-calendar.scss but when i add that to my scss, the imports for the month/day/week/common do not exist at all in my source.

I am sure i am missing something simple.

Thanks,
jAC

[mattlewis92]

Have you defo got version 0.27.0-beta.11 installed in your package.json?

[jcanning]

yes sir, "angular-calendar": "^0.27.0-beta.11", is what is listed there.

[mattlewis92]

hmm weird, and you've defo got @import '~angular-calendar/scss/angular-calendar.scss'; at the top of your sass file that calls the mixin?

I put together an example stackblitz for you that might help: https://stackblitz.com/edit/angular-xgefjt?file=demo/styles.scss

[jcanning]

Looks like it was my fault. So my @import was set to an absolute path as css and it didn't work (of course). When i changed it to use the relative path it works fine.

Before:
@import '../node_modules/angular-calendar/css/angular-calendar.css';

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

Posting this for other people as silly as me that might run into the same issue.

This looks like what I am looking for. I will play around with this a bit and let you know if i have any suggestions but this is already meeting my needs! Thanks so much Matt!

[jcanning]

I guess i do have another question, how would i use it with my current material theme?

[mattlewis92]

Inside your custom-theme mixin, I think you would add the calendar mixin and extract the relevant variables to create a new sass map in the format the calendar expects:

@mixin custom-theme($theme) {

@include cal-theme(
    (
      bg-primary: map-get($theme, 'foreground'),
      bg-secondary: map-get($theme, 'background'),
      bg-active: map-get($theme, 'primary'),
      border-color: map-get($theme, 'primary'),
      gray: map-get($theme, 'background'),
      today-bg: map-get($theme, 'background'),
      event-color-primary: map-get($theme, 'background')
    )
);

}

[jcanning]

@mattlewis92 i think it's on the right track but it looks like the cal-theme is not getting the value from my theme for some reason

`ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

  background-color: darken(map-get($theme, bg-active), 5%) !important;
                   ^
  Argument `$color` of `darken($color, $amount)` must be a color
  in /frontend/appname/node_modules/angular-calendar/scss/modules/month/calendar-month-view.scss (line 53, column 25)`

Edit: Formatting of the image and wording

[jcanning]

I am terrible at scss but i think it has to do with the map-merge part? as you pass the overrides in, there isn't consideration for passing it like @mixin cal-month-view-theme($theme, $overrides) but im not 100% sure i am following what is going on in your styles. I tried a few things but failed.

Edit: just another thought, your $overrides is expecting a color but it is being passed an object instead. Is there any way in scss to break out the $custom-theme object i am setting to get the colors?

Not sure if i am making any sense.

[mattlewis92]

hmm, weird, I'm not particularly adept at sass to know quite what's going wrong there, any chance you can make a really minimal repro on github to share what you've done so far and then I can hack away on that and try and find a solution?

[maranmaran]

Hello Matt, really appreciate what you're doing with this calendar. I'm stuck on one styling issue and that is height. How would I go about changing the calendar height, expand cells till it hits 100% of my view? Thanks in advance

[jcanning]

hmm, weird, I'm not particularly adept at sass to know quite what's going wrong there, any chance you can make a really minimal repro on github to share what you've done so far and then I can hack away on that and try and find a solution?

Hey Matt, sorry for the delay. I will do that for sure in a few days. I got tied up with life. I have another issue that I will post about as well.

Thanks

[mattlewis92]

Hello Matt, really appreciate what you're doing with this calendar. I'm stuck on one styling issue and that is height. How would I go about changing the calendar height, expand cells till it hits 100% of my view? Thanks in advance

I think you can use flexbox to do this.

[mattlewis92]

hmm, weird, I'm not particularly adept at sass to know quite what's going wrong there, any chance you can make a really minimal repro on github to share what you've done so far and then I can hack away on that and try and find a solution?

Hey Matt, sorry for the delay. I will do that for sure in a few days. I got tied up with life. I have another issue that I will post about as well.

Thanks

Sure, no rush! 😄

[mattlewis92]

Ahhh, I see what the issue is now, the $theme is a map of maps, not of colors. Instead of doing things like map-get($theme, 'foreground'), you need to pull the colors from a map of colors such as map-get($mat-dark-theme-background, 'status-bar').

[medeirosjoaquim]

Just started using angular-calendar. And this theming feature is great! Thanks Matt!