Friday, June 21, 2024

How to Open SweetAlert Modal Popup on Event Click FullCalendar?

Angular 8 Sweetalert working example

Open Sweetalert Modal Popup on Event Click FullCalendar - The Rich Post

Hello to all, welcome to In this post, I will tell you, How to Open SweetAlert Modal Popup on Event Click FullCalendar?

I have written to many post for FullCalendar and also I have done with Open Bootstrap Modal Popup Event Click Fullcalendar,

which is top most posts in my blog.

FullCalendar is Javascript open source plugin. I personally like it very much because of its amazing working feature.

Today I will open sweetAlert on fullCalendar Event click with Event Name and Event Start Date.

Here is the working image:

open sweetalert modal popup on event click fullcalendar


1. Here is the complete working and tested code and you can add into your html or php files:

<!DOCTYPE html>
<meta charset='utf-8' />
<link href='' rel='stylesheet' />
<link rel='stylesheet' href='
<link href='' rel='stylesheet' media='print' />
<script src=''></script>
<script src=''></script>
<script src=''></script>
<script src='
<script src=""></script>

  $(document).ready(function() {
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
      defaultDate: '2018-03-12',
      navLinks: true, // can click day/week names to navigate views
      editable: true,
      eventLimit: true, // allow "more" link when too many events

           events: [
          title: 'All Day Event',
          start: '2018-03-01',
          title: 'Long Event',
          start: '2018-03-07',
          end: '2018-03-10',
          id: 999,
          title: 'Repeating Event',
          start: '2018-03-09T16:00:00'
          id: 999,
          title: 'Repeating Event',
          start: '2018-03-16T16:00:00'
          title: 'Conference',
          start: '2018-03-11',
          end: '2018-03-13'
          title: 'Meeting',
          start: '2018-03-12T10:30:00',
          end: '2018-03-12T12:30:00'
          title: 'Lunch',
          start: '2018-03-12T12:00:00'
          title: 'Meeting',
          start: '2018-03-12T14:30:00'
          title: 'Happy Hour',
          start: '2018-03-12T17:30:00'

          title: 'Dinner',
          start: '2018-03-12T20:00:00'
          title: 'Birthday Party',
          start: '2018-03-13T07:00:00'
          title: 'Click for Google',
          url: '',
          start: '2018-03-28'
      eventClick: function(calEvent, jsEvent, view, resourceObj) {
      /*Open Sweet Alert*/
            title: calEvent.title,//Event Title
            text: "Start From : "+moment(calEvent.start).format("MMMM Do YYYY, h:mm a"),//Event Start Date
            icon: "success",




  body {
    margin: 40px 10px;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;

  #calendar {
    max-width: 900px;
    margin: 0 auto;
  .hoverEffect {
    font-size: 29px;
    position: absolute;
    margin: 30px 55px;
    cursor: pointer;

  <div id='calendar'></div>


 If you have any query related to this post, then please do comment or ask question. Hope you like this post.

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.