ABSYZ ABSYZ

  • Home

    Home

  • About us

    Who We Are

  • Our Expertise

    What we Do

  • Our Approach

    How We Do It

  • Products

    What We Made

  • Industries

    Who We Do It For

  • Clients

    Whom We Did It For.

  • Article & Blogs

    What Experts Think

  • Careers

    Join The Team

  • Get In Touch

    Let’s Get Started

ABSYZ

Custom Calendar Lightning Component

Home / Article & Blogs / Salesforce / Lightning / Custom Calendar Lightning Component
By Team ABSYZ inLightning, Salesforce

Calendar view allows you to view all your events in Salesforce. You can create, view and edit your events in a single view. In this example we will open and edit Salesforce events from this custom calendar component.

The calendar view created consists of the following functionalities:

  1. Grid format with month, week , day to display the events.
  2. Create a new event by clicking on a particular date.
  3. Editing an event by click or by drag/ drop  of the event.
  4. View the events in a list view.
  5. View week numbers in a separate column.

1) Download the fullCalendar library from https://fullcalendar.io/download

2) Upload the library as a static resource in your Salesforce Org.

3) Reference the library in your lightning component.

This lightning component would fetch all the events related to a particular user and display in the Calendar view.

The user can toggle between the buttons to view the calendar either in month, week, day view.

In the header we specify the previous, next and today button towards left by default. At the center would be the title. At right side we specify month, week and day view. This allows the user to toggle between different views based on month,day or week.

c1

Here, we are showing all the events created by the logged in user in the calendar. Once we have the event data retrieved, we need to build a JSON that would accept the data in the required format. So here we create an array of JSON object that will accept the start date, end date, event Id and the subject as shown below.

The default date should be in the format yyyy/mm/dd.

c2

Cal1

cal2

cal3

In the gridview user can click on the event scheduled for a particular date for editing. FullCalendar library provides eventClick function that is invoked when user clicks on an event. It will pass the event object that holds the particular event id.

The editrecord event receives the event id on click of the grid to open the standard edit page allowing the user to edit the event.

cal5.PNG

cal6.PNG

Create a new event by clicking on a particular date grid. When the user clicks on a grid we invoke the dayClick() function and fire the standard createRecord event.

cal7.PNG

User can toggle between Grid view and list view.  We can set the default view as listview to view the calendar in list view format. By default, you can always view the grid format.

cal10cal9.PNGYou can also view the week number in a separate column.

cal11.PNG

FullCalendar also provides drag and drop functionality. We set editable and droppable to true and eventDrop function is executed when the event is dropped on a different grid or is changed. It will prompt the user for a confirmation before editing the event. If user selects no, revertFunc() will be executed else we need to edit the event based on the start and end date.

COMPONENT

Capturetest1

CONTROLLER

controller

HELPER

controller1

controller2.PNG

controller3

controller4

APEX

Capture2.PNG

fullCalendar reference: https://fullcalendar.io/docs

Find complete code at https://github.com/AryaRamani/fullCalendar

Thus using fullCalendar library you can easily built custom lightning component with Calendar view to customize your functionality.

CalendarLightning component
110
Like this post
127 Posts
Team ABSYZ

Search Posts

Archives

Categories

Recent posts

Meet OmniStudio – Revolutionize Your Creative Work

Meet OmniStudio – Revolutionize Your Creative Work

BioAsia 2023 in Hyderabad: An Annual International Event

BioAsia 2023 in Hyderabad: An Annual International Event

The Role Of Marketing in Small & Medium Enterprises

The Role Of Marketing in Small & Medium Enterprises

Salesforce For Retail: How Salesforce CRM Can Help Retailers

Salesforce For Retail: How Salesforce CRM Can Help Retailers

What is ChatGPT & How Does It Work?

What is ChatGPT & How Does It Work?

  • Previous PostStep by step process of integration between Outlook and Salesforce by Service Account Connection method
  • Next PostLightning Bolt Solution with Community Templates,Flow Categories and Custom Apps

Related Posts

Meet OmniStudio – Revolutionize Your Creative Work
Salesforce

Meet OmniStudio – Revolutionize Your Creative Work

Salesforce For Retail: How Salesforce CRM Can Help Retailers
Salesforce

Salesforce For Retail: How Salesforce CRM Can Help Retailers

Introduction To Copado Devops Tool
Salesforce

Introduction To Copado Devops Tool

What is Salesforce Code Builder?
Salesforce

What is Salesforce Code Builder?

1 Comment

  1. jitendra Josyula
    Reply
    26 January 2019

    Thank you. this is a great solution. cheers 🙂

    Reply

Leave a Reply (Cancel reply)

Your email address will not be published. Required fields are marked *

*
*

ABSYZ Logo

INDIA | USA | UAE

  • About us
  • Article & Blogs
  • Careers
  • Get In Touch
  • Our Expertise
  • Our Approach
  • Products
  • Industries
  • Clients
  • White Papers

Copyright ©2022 Absyz Inc. All Rights Reserved.

youngsoft
Copy
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “ACCEPT ALL”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent. Privacy Policy
Cookie SettingsREJECT ALLACCEPT ALL
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.

CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Functional

Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.

Performance

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

Analytics

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.

Advertisement

Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.

Others

Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.

SAVE & ACCEPT