Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

AEM 6.0 calendar

Avatar

Level 2

Simple question: In AEM 6, how do I add a simple out-of-the-box calendar? I added the "calendar-hbs" component to a page but the 2 tabs (settings and tag field) don't give me any configurable options to create a calendar.

What I'm really trying to do is have this component connect to a google calendar to display events from that calendar. Is that possible in AEM 6 too? If so, how?

1 Accepted Solution

Avatar

Correct answer by
Level 10

You have 2 choices here:

 1 - overlay existing ootb calendar component.

2  - create a custom Calendar component using a JQuery plug-in. You can even create a dialog and make it reflect exactly what you need it to do.

There are lots of great JQuery Calendar Plug-ins:

http://codegeekz.com/10-best-jquery-calendar-plugins-for-developers/

We have a few community articles - based on a carousel component  - that shows you how to use a JQuery plug-in to build a custom AEM component:

https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html (how to built it using JQuery)

https://helpx.adobe.com/experience-manager/using/integrating-custom-carousel-component-cq.html ( how to hook it into AEM and use a Dialog for it, etc). 

Also - check out this link (it uses JQuery):

http://fullcalendar.io/docs/google_calendar/

View solution in original post

3 Replies

Avatar

Correct answer by
Level 10

You have 2 choices here:

 1 - overlay existing ootb calendar component.

2  - create a custom Calendar component using a JQuery plug-in. You can even create a dialog and make it reflect exactly what you need it to do.

There are lots of great JQuery Calendar Plug-ins:

http://codegeekz.com/10-best-jquery-calendar-plugins-for-developers/

We have a few community articles - based on a carousel component  - that shows you how to use a JQuery plug-in to build a custom AEM component:

https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html (how to built it using JQuery)

https://helpx.adobe.com/experience-manager/using/integrating-custom-carousel-component-cq.html ( how to hook it into AEM and use a Dialog for it, etc). 

Also - check out this link (it uses JQuery):

http://fullcalendar.io/docs/google_calendar/

Avatar

Level 2

Hi,

 

I am trying to overlay the existing OOTB calendar component. But after doing that even the existing community calendar component is not getting load.

Can you please help me with customizing OOTB calendar component using overlay.

 

 

Thanks

Nitesh

Avatar

Level 9

The 6.1/6.2 versions of the documentation may be more up-to-date.

See if the info here is helpful.

Also, the GitHub sample might be helpful, although it's for extending a compnent, not overlaying it.

- JK