Therichpost

Fullcalendar with select month drop down

·

,
therichpost Avatar
therichpost
fullcalendar

Hello to all, welcome to therichpost.com. In this post, I will tell you, Fullcalendar with select month drop down. fullcalendar is the best A JavaScript event calendar. Customizable and open source.
In this post, I will add month dropdown in full-calendar navbar and with select month options, full-calendar will change the view according month.

fullcalendar-with-month-select-options

Here is the working code and you need to just add this into your html file:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<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>

  $(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
      events: [
        {
          title: 'All Day Event',
          start: '2018-03-01'
        },
        {
          title: 'Long Event',
          start: '2018-03-07',
          end: '2018-03-10'
        },
        {
          id: 999,
          title: 'Repeating Event',
          start: '2018-03-09T16:00:00'
        },
        {
          id: 999,
          title: 'Repeating Event',
          start: '2018-03-16T16:00:00'
        },
        {
          title: 'Conference',
          start: '2018-03-11',
          end: '2018-03-13'
        },
        {
          title: 'Meeting',
          start: '2018-03-12T10:30:00',
          end: '2018-03-12T12:30:00'
        },
        {
          title: 'Lunch',
          start: '2018-03-12T12:00:00'
        },
        {
          title: 'Meeting',
          start: '2018-03-12T14:30:00'
        },
        {
          title: 'Happy Hour',
          start: '2018-03-12T17:30:00'
        },
        {
          title: 'Dinner',
          start: '2018-03-12T20:00:00'
        },
        {
          title: 'Birthday Party',
          start: '2018-03-13T07:00:00'
        },
        {
          title: 'Click for Google',
          url: 'https://therichpost.com/open-bootstrap-modal-popup-event-click-fullcalendar',
          start: '2018-03-28'
        }
      ]
    });
  
  $(".fc-right").append('<select class="select_month"><option value="">Select Month</option><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mrch</option><option value="4">Aprl</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select>');
  
   $(".select_month").on("change", function(event) {
   $('#calendar').fullCalendar('changeView', 'month', this.value);
   $('#calendar').fullCalendar('gotoDate', "2018-"+this.value+"-1");
   });

  });

</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;
  }

</style>
</head>
<body>
  
  <div id='calendar'>
  </div>

</body>
</html>

 There are so many tricks in fullcalendar and I will let you know all. Please do comment if you any   query related to this post. Thank you. Therichpost.com

Other Posts

Comments

14 responses to “Fullcalendar with select month drop down”

  1. david Avatar
    david

    Helpful, thank you

  2. HBen Avatar
    HBen

    Hi I tried your one. but I change year, month and year dates are not syncing and not working properly.. WHy?

  3. Ajay Malhotra Avatar
    Ajay Malhotra

    Hi, did you follow my example completely or you have added your code?

  4. HBen Avatar
    HBen

    I am fed up with this full calendar.. I want to choose a year’s whole Monday by selecting Monday from drop down and need to add those set of Mondays to my data table automatically once they all got selected. Is there any way to do it?? Need it urgent too,as deadline is tomorrow…

  5. HBen Avatar
    HBen

    Hi I have a working full calendar same like yours, At first I need to add month drop down only..so I chose
    This part only from yours.. Month drop down came rdy.. but only 2018 year only working along with your month drop down…
    $(“.fc-right”).append(‘Select MonthJanFebMrchAprlMayJuneJulyAugSepOctNovDec’);

    $(“.select_month”).on(“change”, function(event) {
    $(‘#calendar’).fullCalendar(‘changeView’, ‘month’, this.value);
    $(‘#calendar’).fullCalendar(‘gotoDate’, “2018-“+this.value+”-1″);
    });
    });

  6. Ajay Malhotra Avatar
    Ajay Malhotra

    Means Month dropdown is working fine?

  7. Ajay Malhotra Avatar
    Ajay Malhotra

    I did not get this?

  8. HBen Avatar
    HBen

    Month drop down working fine. but If I change the year month drop down not working together with changed year

  9. HBen Avatar
    HBen

    I dont know how to explain clearly in this comment section. I have a full calendar, a data-table, a drop down and a load button. My drop down has Monday to Sunday options. Lets say,If I select Monday from drop down, after I click Load button , my calendar’s – selected year’s – all Monday-cell’s background color must be changed and those whole Monday’s set must be added to my data table. These all will be done through java script.. Kindly help,if can. Is there any other way to share my codes to give u a clear view???

  10. Ajay Malhotra Avatar
    Ajay Malhotra

    If I change the year month drop down not working together with changed year

    You want both?

  11. HBen Avatar
    HBen

    Shared my code. Kindly check.

  12. HBen Avatar
    HBen

    yes I want my month changed together with selecting year..

  13. HBen Avatar
    HBen

    @Ajay Sir, While using ur code, I found out that , only september month loading for both oct and sep option, bcoz of this, dec month never come out. until sep, it works fine, for oct -it shows sep again, for nov-it shows oct and for dec-it shows nov..

  14. jasmeen Avatar
    jasmeen

    how to do fullcalendar with select month and year dropdown?

Leave a Reply