Adding the border style to an event in Full Calendar

Question

I just want to add the border style to one of the events but not all events in full Calendar. Any help? changes are like want to add the border styles to the event for the fullcalendar.changes are like want to add the border styles to the event for the full calendar.

Only add the border style to the single event for the calendar.
 Only add the border style to the single event for the calendar.
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'resourceDayGrid', 'resourceTimeGrid' ],
      defaultView: 'resourceTimeGridDay',
      defaultDate: '2019-08-07',
      editable: true,
      selectable: true,
      eventLimit: true, // allow "more" link when too many events
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 
  'resourceTimeGridDay,resourceTimeGridTwoDay,timeGridWeek,dayGridMonth'
      },
      views: {
        resourceTimeGridTwoDay: {
          type: 'resourceTimeGrid',
          duration: { days: 2 },
          buttonText: '2 days',
        }
      },

      //// uncomment this line to hide the all-day slot
      //allDaySlot: false,

      resources: [
        { id: 'a', title: 'Room A', eventColor: 'pink' },
        { id: 'b', title: 'Room B', eventColor: 'green' },
        { id: 'c', title: 'Room C', eventColor: 'orange' },
        { id: 'd', title: 'Room D', eventColor: 'red' }
      ],
      events: [
        { id: '1', resourceId: 'a', start: '2019-08-06', end: '2019-08- 
     08', title: 'event 1' },
        { id: '2', resourceId: 'a', start: '2019-08-07T09:00:00', end: 
'2019-08-07T14:00:00', title: 'event 2' },
        { id: '3', resourceId: 'b', start: '2019-08-07T12:00:00', end: 
'2019-08-08T06:00:00', title: 'event 3' },
        { id: '4', resourceId: 'c', start: '2019-08-07T07:30:00', end: 
'2019-08-07T09:30:00', title: 'event 4' },
        { id: '5', resourceId: 'd', start: '2019-08-07T10:00:00', end: 
'2019-08-07T15:00:00', title: 'event 5' }
      ],

      select: function(arg) {
        console.log(
          'select',
          arg.startStr,
          arg.endStr,
          arg.resource ? arg.resource.id : '(no resource)'
        );
      },
      dateClick: function(arg) {
        console.log(
          'dateClick',
          arg.date,
          arg.resource ? arg.resource.id : '(no resource)'
        );
      }
    });

    calendar.render();
  });

</script>
<style>
    #a {
        border-color: 5px dashed yellow;
    }
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width: 900px;
    margin: 50px auto;
  }

</style>
</head>
<body>

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

</body>
</html>

Only add the border style to the single event for the calendar.

which one do you want to change specifically, and on what basis? Also, which version of fullCalendar are you using? — ADyson, Nov 27 '19 at 10:54
I am adding multiple events but Want to change one event with border style (like dashed border). — Haseena Banu L, Nov 27 '19 at 10:57
So, are you having manual events ? or you intend to dynamically load events later ? And do you want to apply border style to alternate event ? Please confirm criteria to apply border style to specific event ? — Khurram Ishaque, Nov 27 '19 at 12:10
Loading events manually, for only one event I want to apply the border style. — Haseena Banu L, Nov 27 '19 at 12:14

Khurram Ishaque · Answer 1 · 2019-11-27T17:06:23.357

2

You may use "borderColor" option within the event as follow:

events: [
        { id: '1', resourceId: 'a', start: '2019-08-06', end: '2019-08- 
     08', title: 'event 1', borderColor: '#0000ff' },
        { id: '2', resourceId: 'a', start: '2019-08-07T09:00:00', end: 
'2019-08-07T14:00:00', title: 'event 2' },
        { id: '3', resourceId: 'b', start: '2019-08-07T12:00:00', end: 
'2019-08-08T06:00:00', title: 'event 3' },
        { id: '4', resourceId: 'c', start: '2019-08-07T07:30:00', end: 
'2019-08-07T09:30:00', title: 'event 4' },
        { id: '5', resourceId: 'd', start: '2019-08-07T10:00:00', end: 
'2019-08-07T15:00:00', title: 'event 5' }
      ]

Please note I have added 'borderColor' option in First Event.

And you may use eventRender to apply border style as follows:

eventRender: function (info) {
  var eventId = info.event.id;
  if (eventId == '1')
    {
      $(info.el).css("border-style", "dashed");
      $(info.el).css("border-color", "#ffff00");
    }
}

edited Nov 27 '19 at 17:06

answered Nov 27 '19 at 13:38

Khurram Ishaque

778
1
9
26

Hi, Thank you for the reply, if the events are intended to dynamically load events later then how can I add the border style? Any solution? – Haseena Banu L Nov 28 '19 at 04:13
Same approach.. In dynamic approach, you should assign an id to event, and check in eventRender that if id is same than assign border. – Khurram Ishaque Nov 28 '19 at 04:41
I got the solution and added the border style to a particular event. – Haseena Banu L Nov 28 '19 at 05:59

Adding the border style to an event in Full Calendar

1 Answers1