CODEWITHSUNDEEP
javascriptjqueryfullcalendar
Aneeez
Aneeez

Reputation: 1452

get clicked date from full calendar

Clicking a date on fullcalendar launches a modal '#view_event'. I want to get the date on which I have clicked. each date has the class '.fc-day' has an attribute data-date="2015-02-13". so I tried the following.

$(".fc-day").click(function(){
    var fetchDate = $(this).data("date");
    $("#displayDate").text(fetchDate);
});

'#displayDate' is a p element in the modal. The above code isn't working. What's wrong?

Upvotes: 2

Views: 35798

Answers (4)

umarbilal
umarbilal

Reputation: 318

According to the official docs https://fullcalendar.io/docs/v3/handlers

dayClick: function(date, jsEvent, view) {
    console.log('clicked on ' + date.format());
}

Upvotes: 0

Gautam Solanki
Gautam Solanki

Reputation: 21

Fullcalendar provide default event to get selected date and time. So don't need to use any extra thing.Only you need to use below code snippet and you will get selected date in full calendar. It will be UTC format so you have to make some processing to get that date as per your timezone

$('#calendar').fullCalendar({ 
     dayClick: function(date, jsEvent, view) { 
         alert("Selected Date:"+date._d)
      }
  });

please give your feedback if you find this answer useful.

Upvotes: 0

prime
prime

Reputation: 15584

Don't use the classes to access the date. there are ways to get the date and below is one where you can do it when you initialize the calendar , Using that you can get the date , month and year separately.

    $('#calendar').fullCalendar({

        dayClick: function(date, jsEvent, view) { 
            alert('Clicked on: ' + date.getDate()+"/"+date.getMonth()+"/"+date.getFullYear());  
        },

    });

Upvotes: 10

jupeter
jupeter

Reputation: 746

Use 'select' in fullcalendar

o.fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month'
    },
    select: 
      function(start,end){ 
          alert(start); 
          alert(end); 
          // var selDate = new Date(start);
          // add your function
    },
    editable: false
});

fullcalendar/select

Upvotes: 2

Related Questions