Add cssclass to the cmsCalendar's itemtemplate

joyanta sen asked on July 17, 2018 00:22

Hi, I have multiple events inside a day of CMSCalender. I need to wrap all the events under a div with a specific css class. I observed in the source view that each event is creating a div tag with class "calendar-item". I need to wrap all the div under a div tag with a different class. The structure should be like below:

     <td>
 <div class="calendar-item></div> --Representing event
 <div class="calendar-item></div>
 <div class="calendar-item></div>
</td>

Need the following outcome:

    </td>
 <div class="calendar-cell-inner"> 
      <div class="calendar-item></div>
      <div class="calendar-item></div>
      <div class="calendar-item></div>
  </div>
</td>

Thanks, Joyanta

add cssclass in cmscalend

Correct Answer

Trevor Fayas answered on July 17, 2018 21:44

The Calendar webpart's display is a little limiting, you may be better off using Javascript to wrap the elements manually, something like this:

$(".calendar-item").each(function() {
    var parent = $($(this).parent());
    if(parent.is("td")) {
        var newContainer = $('<div class="calendar-cell-inner"></div>');
        $(".calendar-item", parent).appendTo(newContainer);
        // may need this
        // parent.html("");
        parent.append(newContainer);
    }
});

Totally untested, but honestly may be the easiest way to go. Otherwise you need to create your own Repeater, which can be done using windowing functions (to detect when a new day is).

1 votesVote for this answer Unmark Correct answer

Recent Answers

joyanta sen answered on July 18, 2018 16:27

Thanks Trevor. It worked.

0 votesVote for this answer Mark as a Correct answer