FullCalendar

How to show plus icon on day hover in fullcalendar?

Show plus icon on day hover in fullcalendar

Hello to all, welcome to therichpost.com. 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.

fullcalendar-show-plus-icon-ondayhover

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>
<html>
<head>
<meta charset='utf-8' />
<link href='https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css'>
<link href='https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/moment.min.js'></script>
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/jquery.min.js'></script>
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min
.js'></script>
<script>

  $(document).ready(function() {

    $('#calendar').fullCalendar({
      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.find(".hoverEffect").show();
                      cell.css("background", "rgba(0,0,0,.1)");
                  }).mouseleave(function() {
                      $(".hoverEffect").hide();
                      cell.removeAttr('style');
                  });
              }


    });

  });

</script>
<style>

  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;
}
</style>
</head>
<body>

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

</body>
</html>

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

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

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