CODEWITHSUNDEEP
javascriptcssfullcalendarfullcalendar-4
Haseena Banu L
Haseena Banu L

Reputation: 45

Adding the border style to an event in Full Calendar

enter image description hereI 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.

Upvotes: 2

Views: 3379

Answers (1)

Khurram Ishaque
Khurram Ishaque

Reputation: 798

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");
    }
}

Upvotes: 2

Related Questions