Thursday, June 13, 2024

How to show plus icon on day hover in fullcalendar?

Show plus icon on day hover in fullcalendar

Hello to all, welcome to In this post, I will tell you, How to show plus icon on day hover in fullcalendar? fullcalendar is the best A JavaScript event calendar. Customizable and open source. In this post, we will show plus icon on day hover.


Here is the working and tested code and you can add this complete html file and enjoy the  Show plus icon on day hover in fullcalendar code:
<!DOCTYPE html>
<meta charset='utf-8' />
<link href='' rel='stylesheet' />
<link rel='stylesheet' href='
<link href='' rel='stylesheet' media='print' />
<script src=''></script>
<script src=''></script>
<script src=''></script>
<script src='

  $(document).ready(function() {

      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
      defaultDate: '2018-03-12',
      navLinks: true, // can click day/week names to navigate views
      editable: true,
      eventLimit: true, // allow "more" link when too many events

             dayRender: function (date, cell) {

                  cell.append("<span class='hoverEffect' style='display:none;'>+</span>");

                  cell.mouseenter(function() {
                      cell.css("background", "rgba(0,0,0,.1)");
                  }).mouseleave(function() {




  body {
    margin: 40px 10px;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;

  #calendar {
    max-width: 900px;
    margin: 0 auto;
  .hoverEffect {
    font-size: 29px;
    position: absolute;
    margin: 30px 55px;
    cursor: pointer;

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


Hope you like this post and give me reviews on this post and I will come with more fullcalendar tricks.

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.