full Calender

by Asif Ahmed

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
<div id='wrap'>
<img src="" alt="client logo" id='client-logo' height=80 width=80 style="float: left;margin-left:45px;">
<div class="clients" style="float:left;clear:left;">
<select id="client-list" onchange="changeImage(this)" style="width:150px; height:40px; margin-left:18px;margin-top:2px;">
<option value="Choose Client">---Choose Client---</option>
<option value="Client 1">Client 1</option>
<option value="Client 2">Client 2</option>
<option value="Client 3">Client 3</option>
<option value="Client 4">Client 4</option>
<option value="Client 5">Client 5</option>
</select>

    <div id='external-events'>
        <div id='external-events-listing'>
            <h4>Channel List</h4>
            <div class='fc-event'>My Event 1</div>
            <div class='fc-event'>My Event 2</div>
            <div class='fc-event'>My Event 3</div>
            <div class='fc-event'>My Event 4</div>
            <div class='fc-event'>My Event 5</div>
        </div>
    </div>
    <div class="container">
    <span type="reset" id="btnReset" class="btn btn-default" style="margin
    top: 10px;" >Reset Calender</span>
			<ul id="daysEvent"></ul>
      <div id='calendar'></div>
    </div>
</div>

CSS

button.remove {
    font-size: .85em;
    border: 1px solid #3a87ad;
    background-color: #3a87ad;
    font-weight: 400;
    color: #fff;
    margin: 3px 0;
}
calender-body {
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
.fc-content span.close {
    color: #fff;
    opacity: 1;
    text-shadow: none;
    font-size: 16px;
}
#wrap {
  width: 1500px;
  margin: 0 auto;
}

#external-events {
  float: left;
  width: 150px;
  padding: 0 10px;
  border: 1px solid #ccc;
  background: #eee;
  text-align: left;
}

#external-events h4 {
  font-size: 16px;
  margin-top: 0;
  padding-top: 1em;
}

#external-events .fc-event {
  margin: 10px 0;
  cursor: pointer;
}

#external-events p {
  margin: 1.5em 0;
  font-size: 11px;
  color: #666;
}

#external-events p input {
  margin: 0;
  vertical-align: middle;
}

#calendar {
  float: left;
  width: 1150px;
}
.mb-20{
  margin-bottom:20px;
}

JavaScript

$(document).ready(function() {
    /* initialize the external events
    -----------------------------------------------------------------*/

    $('#external-events .fc-event').each(function() {

      // store data so the calendar knows to render an event upon drop
      $(this).data('event', {
        title: $.trim($(this).text()), // use the element's text as the event title
        stick: true // maintain when user navigates (see docs on the renderEvent method)
      });

      // make the event draggable using jQuery UI
      $(this).draggable({
        zIndex: 999,
        revert: true,      // will cause the event to go back to its
        revertDuration: 0  //  original position after the drag
      });

    });


    /* initialize the calendar
    -----------------------------------------------------------------*/

    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      defaultView:'agendaDay',
      unselectAuto: false,
      selectable: true,
      selectHelper: false,
      editable: true,
      droppable: true, // this allows things to be dropped onto the calendar
      drop: function() { },
                    eventRender: function(event, element) {
                    element.find(".fc-content").append("<span class='close' data-id='" + event._id +"'>x</span>");
                    },
                    eventResize:function( event, jsEvent, ui, view ) {
                    console.log("event",event);
                    alert("StartTime : "+new Date(event.start));
                    eve = "Channel name : "+ event.title;
                    s = "StartTime : "+new Date(event.start);
                    ee = " End "+new Date(event.end);
                    alert(eve+"\n"+s+"\n"+ee);
                    <!--alert("Event : "+ event.title+" StartTime : "+new Date(event.start)+" End "+new Date(event.end));-->
                    },
            ...