How to register an event using addEventSource in fullCalendar?

Question

When I click on the dayClick , I want to add an event to the clicked date.

I have the following JS code:

$('#calendar').fullCalendar({
  header: {
    center: "title", // 센터에는 타이틀 명이 오고
    left: "prev", // 왼쪽에는 < 버튼이 오고
    right: "next" // 오른쪽에는 > 버튼이 오게됌
  },
  lang: 'ko', // 달력 한글 설정
  editable: true, // 달력의 이벤트를 수정할 수 있는지 여부를 결정
  dayClick: function(date, allDay, view) // 일 클릭시 발생
    {
      var dateFormat = date.format('YYYY-MM-DD');

      if (confirm('Do you want to register as closed?')) {
        // Register event
      } else {
        alert('You Click No');
      }
    }
});

//Register event this part, how do I add the code?

I've been very careful with the "select" feature, but the functionality I want to implement is simple, so I prefer using " addEventSource " rather than "select".

But I am a beginner of jquery and javascript, so I do not know how to write it.

Please guide me on how to write code.

And I would really appreciate it if you could give me a link to a site or question I could refer to.

(Oh, note that all title values for events to be registered are "closed")

Answer 1

Set the following options for fullcalendar . See select demo .

selectable: true,
selectHelper: true,
select: function (start, end, jsEvent, view) {
  var title = 'Some Event';
  var eventData = {
    title: title,
    start: start,
    end: end
  };

  if (confirm('Do you want to register as closed?')) {
    $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
  } else {
    alert('You Click No');
  }
  $('#calendar').fullCalendar('unselect');
},

Setting the select callback allows the use to click and drag to select multiple dates and set an event.

To allow only single day events, restrict the user to only clicks by setting dayClick option for fullcalendar instead.

dayClick: function (start, end, jsEvent, view) {
    var title = 'Some Event';
    var eventData = {
      title: title,
      start: start,
    };

    if (confirm('Do you want to register as closed?')) {
      $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
    } else {
      alert('You Click No');
    }

    $('#calendar').fullCalendar('unselect');
},