Adding Color-coded Event Categories

[KoniKodes]

How do I add separate event categories with distinct category colors? I am wanting 3 different event categories, each showing on its calendar day in the category color. Thank you.

[deviprsd]

Hi @KoniKodes, The current version is v5.0.1, and you can create as many number of color coded categories. Check out the latest release, https://github.com/deviprsd21/Calendario/releases/tag/v5.0.1 and check this site that uses calendario and also color coded events using categories http://www.newforestwaterpark.co.uk/opening-times/wake-park-opening-times/. You can ask me for help, just reply here.

[deviprsd]

If you are going to use Calendario in your website, I might want to add it to our documents for reference

[KoniKodes]

Thank you, Devi,

I’ve looked at the coding and am just a little lost… so much went into that calendar – it is pretty.

Where and how exactly was the categories coded? I can’t see that.

I am hard-coding this, I don’t use wordpress.

Also, I do have files set up already with the data for all 3 categories. Is it possible to pull from those, or will I need to copy/paste?

I would like to set it up as is Demo2, with pop-ups onClick.

From: Devi Prasad [mailto:notifications@github.com] Sent: Monday, May 9, 2016 11:55 AM To: deviprsd21/Calendario Cc: KoniKodes; Mention Subject: Re: [deviprsd21/Calendario] Adding Color-coded Event Categories (#15)

Hi @KoniKodes https://github.com/KoniKodes , The current version is v5.0.1, and you can create as many number of color coded categories. Check out the latest release, https://github.com/deviprsd21/Calendario/releases/tag/v5.0.1 and check this site that uses calendario and also color coded events using categories http://www.newforestwaterpark.co.uk/opening-times/wake-park-opening-times/. You can ask me for help, just reply here.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/deviprsd21/Calendario/issues/15#issuecomment-217955677 https://github.com/notifications/beacon/ARjWicAZjF07QnAoeTik_PFWQM6l5Pj8ks5p_4MfgaJpZM4IaaKh.gif

[KoniKodes]

I would love to share with you once it is in place.

I’ve been searching for the perfect template for so long, that I will be very proud to showcase it when it is in place. And, I’ll be happy to link back to you,

From: Devi Prasad [mailto:notifications@github.com] Sent: Monday, May 9, 2016 11:59 AM To: deviprsd21/Calendario Cc: KoniKodes; Mention Subject: Re: [deviprsd21/Calendario] Adding Color-coded Event Categories (#15)

If you are going to use Calendario in your website, I might want to add it to our documents for reference

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/deviprsd21/Calendario/issues/15#issuecomment-217956788 https://github.com/notifications/beacon/ARjWiV9Z0olg1UjabaIlOOwRDdy9OsZXks5p_4QNgaJpZM4IaaKh.gif

[KoniKodes]

I found the solution that was used on the NewForestWaterpark site. Unfortunately, it work for me in this situation.

While there may occasionally be a 2nd child, normally the categories will be on separate dates, such as attached.

[deviprsd]

This example contains all the values that can be attached to an event. The category option will then add a class to the event, like for this one the class will be calendar-work, then you can use css to use color it accordingly.

'12-30-2010' : [{content: "An event", url: 'http://etc', allDay: true, repeat: 'YEARLY', note: 'Busy day', category: 'work', endDate: '12-30-2056'}]

I'm not able to figure out your above problem, so please explain again.

[KoniKodes]

Thank you so much!

That is exactly the example I needed to send me in the right direction.

I appreciate it, and I will share with you once I have it in place.

Toni

From: Devi Prasad [mailto:notifications@github.com] Sent: Tuesday, May 10, 2016 12:48 AM To: deviprsd21/Calendario Cc: KoniKodes; Mention Subject: Re: [deviprsd21/Calendario] Adding Color-coded Event Categories (#15)

This example contains all the values that can be attached to an event. The category option will then add a class to the event, like for this one the class will be calendar-work, then you can use css to use color it accordingly.

'12-30-2010' : [{content: "An event", url: 'http://etc', allDay: true, repeat: 'YEARLY', note: 'Busy day', category: 'work', endDate: '12-30-2056'< /span>}]

I'm not able to figure out your above problem, so please explain again.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/deviprsd21/Calendario/issues/15#issuecomment-218083161 https://github.com/notifications/beacon/ARjWiToG7Gnd3aoptAh7F9OfqMloCSNTks5qADgogaJpZM4IaaKh.gif

[KoniKodes]

I’m not sure what I’m doing wrong, can’t get the reveal to work.

Here’s what Firefox is saying:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://calendario.t15.org/sync/. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

Does this make sense to you?

Thank you,

Toni

From: Devi Prasad [mailto:notifications@github.com] Sent: Tuesday, May 10, 2016 12:48 AM To: deviprsd21/Calendario Cc: KoniKodes; Mention Subject: Re: [deviprsd21/Calendario] Adding Color-coded Event Categories (#15)

This example contains all the values that can be attached to an event. The category option will then add a class to the event, like for this one the class will be calendar-work, then you can use css to use color it accordingly.

'12-30-2010' : [{content: "An event", url: 'http://etc', allDay: true, repeat: 'YEARLY', note: 'Busy day', category: 'work', endDate: '12-30-2056'< /span>}]

I'm not able to figure out your above problem, so please explain again.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/deviprsd21/Calendario/issues/15#issuecomment-218083161 https://github.com/notifications/beacon/ARjWiToG7Gnd3aoptAh7F9OfqMloCSNTks5qADgogaJpZM4IaaKh.gif

[deviprsd]

It does, It was my attempt to create a service where Calendario backed up the events of the user based on UNIQUE id to a server, and also to provide a ical or hfeed format of the events from the backed up events, you can ignore it or remove it, it won't affect anything. If you want to remove it then just find return self.sync(data) and replace it with return data. The service was too much work.

[KoniKodes]

Thank you. I tried that. I still can't get reveal to work. I'm using index2 from 5.0.1. Also, I would like to actually have it slide instead of pop-up, using the style of index3 in version 2. It's not coming together yet, but I have made some progress.

[KoniKodes]

I have combined index2 and index3 from the first version that I downloaded, and my reveal works well now. I have attached my current calendar for this month. I would like for Lei Day and Boy's Day to be a soft blue and represent Hawaiian Holidays. I would like for Memorial Day to be a soft green to represent Federal Holidays, while the pink show holidays observed but not federal holidays.

What do you think?

[KoniKodes]

I'm beta testing on my site now. I've added the background image to the body, and overall I'm happy with it. However, we've found that on one page, the iPhone 5 portrait and landscape (320x568) and iPhone 6 landscape (667) do not bring the image all the way down. Is there a way to fix this? http://www.konikodes.com/calendar/hi-cal.html and http://www.konikodes.com/calendar/sd-cal.html

[KoniKodes]

I'm beta testing on my site now. I've added the background image to the body, and overall I'm happy with it. However, we've found that on one page, the iPhone 5 portrait and landscape (320x568) and iPhone 6 landscape (667) do not bring the image all the way down. Is there a way to fix this? http://www.konikodes.com/calendar/hi-cal.html and http://www.konikodes.com/calendar/sd-cal.html

[deviprsd]

Try playing with css property background-size

[KoniKodes]

I have the background size as 100%. That’s why I was surprised.

From: Devi Prasad [mailto:notifications@github.com] Sent: Monday, May 23, 2016 9:17 AM To: deviprsd21/Calendario Cc: KoniKodes; State change Subject: Re: [deviprsd21/Calendario] Adding Color-coded Event Categories (#15)

Try playing with css property background-size

— You are receiving this because you modified the open/close state. Reply to this email directly or view it on GitHub https://github.com/deviprsd21/Calendario/issues/15#issuecomment-221021198 https://github.com/notifications/beacon/ARjWiTFKtJpE0cbm9gLlTGCE1TQ1xykPks5qEdL5gaJpZM4IaaKh.gif

[deviprsd]

Yes, But your code is

background-size: 100% 100%;
-webkit-background-size: cover;
-o-background-size: cover;

Here the background-size is treated as a fallback if -webkit and -o fail to match with the respective browser. Safari, Chrome and recent versions of Opera are webkit browsers. So if you tried in mozilla for iOS I'm sure you will get the desired effect which you are not getting in Safari or Chrome. All together, the cover property is applied to Safari and not 100% 100%

[KoniKodes]

I see. I removed the cover codes, but the problem still exists. is my background-size correct with 100% as height and width?

[KoniKodes]

I have fixed them! :-) Feel free to link or share http://www.konikodes.com/calendar.hi-cal and http://www.konikodes.com/calendar.sd-cal.

I appreciate your help.

[deviprsd]

I can give you another suggestion, change the background-size to auto and remove the fixed value to make it scrolling, and it will fit. Try it and let me know!