Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

AEM 6.0 calendar

mikes53534728
Level 2
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
smacdonald2008
Correct answer by
Level 10
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
smacdonald2008
Correct answer by
Level 10
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

niteshg35735790
Level 2
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

JK_Kendall
Level 8
Level 8

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