Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css'>
    <link rel='stylesheet prefetch' 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">
​
  <!--scripts-->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
    <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://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>
</head>
<body>
<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>
​
</body>
</html>
 
    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;
}
 
    $(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);
                    },
                    });
                    });
​
    // remove event on click in calender
        $(document).on('click', '.close', function(){
        debugger;
        var id = $(this).data('id'); 
        $('#calendar').fullCalendar('removeEvents', id); 
        $(this).parent().remove();
      });
​
        $("#btnReset").click(function() {
  $('#calendar').fullCalendar('removeEvents');
});
$(document).ready(function() {
    $("#client-list").on("change", function() {
    var selectedValue = $(this).val();
        location.reload();
  });
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
AsifAadeezpro
0viewers