Closed Sertage closed 4 years ago
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.
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
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}]
}
]
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 :).
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.
That is really cool, thank you very much for the support 😄
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:At angular-mydatepicker.util.service.ts I changed the method isMarkedDate as bellow:
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 :)