Allow multiple styles for Marked Dates

[Sertage]

Hi, I am using your component that is fantastic for our purpose, though there is a small limitation that I think it can be improved.
Current behaviour allows to have different arrays of data in the MarkedDates option. You can define a color attribute for each group but if you have a date that is in 2 groups with different colours it will display only one colour.
To allow we have a combination of markers via custom css I would suggest add a style class attribute to the my-marked-date.interface
I created a local branch and it worked well for me. Though, I am not allowed to create a PR.
So I can publish my suggestions here, if you are happy to handle:

export interface IMyMarkedDate {
  marked: boolean;
  color: string;
  styleClass?: string;
}

export interface IMyMarkedDates {
  dates: Array<IMyDate>;
  color: string;
  styleClass?: string;
}

At angular-mydatepicker.util.service.ts I changed the method isMarkedDate as bellow:

isMarkedDate(date: IMyDate, markedDates: Array<IMyMarkedDates>, markWeekends: IMyMarkedDate): IMyMarkedDate {
   let color = null;
   let styles = EMPTY_STR;
   for (const md of markedDates) {
     for (const d of md.dates) {
       if ((d.year === 0 || d.year === date.year) && (d.month === 0 || d.month === date.month) && d.day === date.day) {
         if (md.styleClass) {
           styles = styles + SPACE_STR + md.styleClass;
         }
         color = md.color;
         break;
       }
     }
   }
   if (color) {
     return {marked: true, color: color, styleClass: styles};
   }
   if (markWeekends && markWeekends.marked) {
     const dayNbr = this.getDayNumber(date);
     if (dayNbr === 0 || dayNbr === 6) {
       return {marked: true, color: markWeekends.color, styleClass: markWeekends.styleClass ? markWeekends.styleClass : EMPTY_STR};
     }
   }
   return {marked: false, color: EMPTY_STR, styleClass: EMPTY_STR};
 }

At the end I changed day-view.component.html at line 21 as follow:
<span *ngIf="d.markedDate.marked" class="myDpMarkDate{{d.markedDate.styleClass}}" [ngStyle]="{'border-top': '8px solid ' + d.markedDate.color}"></span>

That will allow also to keep the current behaviour.

Thanks for take this in consideration :)

[kekeh]

Hi @Sertage

Can you post an example of possible options which use this new feature and image on how it is shown in calendar. Why not PR? You have a github account then it should be possible.

[Sertage]

Hi, Kekeh!
Yes, hope it make more clear :)

markDates: [
            {
                color: '',
                styleClass: 'yogaDays',
                dates: [{day: 1, month: 1, year: 2020}, {day: 3, month: 1, year: 2020}, {day: 5, month: 1, year: 2020}]
            },
            {
                color: '',
                styleClass: 'karateDays',
                dates: [{day: 2, month: 1, year: 2020}, {day: 3, month: 1, year: 2020}, {day: 4, month: 1, year: 2020}]
            }
        ]

As you can see day 3 is used in both arrays (yoga and karate). I put color as empty string to not apply the deafult marker.
So finally for each style I created something like:

.yogaDays{
  height: 50px;
  width: 50px;
  background-color: yellow;

  /* for "disabled" effect */
  opacity: 0.5;
}
.karateDays{
  height: 50px;
  width: 50px;
  background-color: blue;

  /* for "disabled" effect */
  opacity: 0.5;
}
/* it will have a different color when both of the styles are applied */
.yogaDays.karateDays {
 background-color: green;
}

In my case I applied kind a background style color for each marked day. But I could play with borders instead as you do, or an image with relative position. Once I can use css class, more options are possible.
PS: I put height and width as 50px because I made my calendar bigger, so I am not sure what would be the default dimmentions

[kekeh]

You can do this with current functionality but you have to do some checks in your code. You have to remove date 3 from yoga and karate dates and put it to own array with own color.

markDates: [
    {
         // yoga dates
         color: 'yellow',
         dates: [{day: 1, month: 1, year: 2020}, {day: 5, month: 1, year: 2020}]
    },
    {
        // karate dates
        color: 'blue',
        dates: [{day: 2, month: 1, year: 2020}, {day: 4, month: 1, year: 2020}]
   },
   {
       // yoga and karate dates
       color: 'green',
       dates: [{day: 3, month: 1, year: 2020}]
   }
]

[Sertage]

Thank you for your suggestion. Though there are other scenarios I could fix via css. Like for blindcolor people, I could put different background images/icons. Here an example I did:

I have an external component that adds all the dates to the Marked Dates, so for me the real value are in the MarkedDates array and not at the input itselft. So I have one calendar that I can add multiple kind of dates. Then ideally css would deal with the style and the MarkedDates array with the real data. I still could follow your solution but that would increase in complexity and also being more limited.

It is ok if you think my suggestion is not viable for the purpouse you created your component. I just though it would be a nice to have :).

[kekeh]

I added this kind of functionality to the 0.6.1 version. Try to install it from npm.

Check markDates option from README.

Here is an example: https://github.com/kekeh/angular-mydatepicker/wiki/usage-of-markDates-option

You have to check each array if there is conflict dates and put them to own array like I supposed in my previous message.

You need to set only background attribute to CSS class because style goes to td element. Like an example.

[Sertage]

That is really cool, thank you very much for the support 😄