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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel='stylesheet' type='text/css' href='http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css' />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='http://code.jquery.com/ui/1.8.17/jquery-ui.min.js'></script>
<script type='text/javascript' src='http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript'>
​
  $(document).ready(function() {
  
    $('#calendar').fullCalendar({
    
      editable: true,
      
      eventSources: [
        {
          events: [
            {
              title     : 'event1',
              start     : '2012-06-10'
            }
          ],
          backgroundColor: 'green',
          borderColor: 'green',
          textColor: 'yellow'
        },
          [
            {
              title     : 'event1',
              start     : '2012-06-10',
              className : 'custom',
            },
            {
              title  : 'event2',
              start  : '2012-06-05',
              end    : '2012-06-07'
            },
            {
              title  : 'event3',
              start  : '2012-06-09 12:30:00',
              allDay : false
            }
          ]
        
        ],
      
      eventDrop: function(event, delta) {
        alert(event.title + ' was moved ' + delta + ' days\n' +
          '(should probably update your database)');
      },
      
      loading: function(bool) {
        if (bool) $('#loading').show();
        else $('#loading').hide();
      }
      
    });
    
  });
​
</script>
<style type='text/css'>
​
  body {
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  }
    
  #loading {
    position: absolute;
    top: 5px;
    right: 5px;
  }
​
  #calendar {
    width: 900px;
    margin: 0 auto;
  }
​
</style>
</head>
<body>
<div id='loading' style='display:none'>loading...</div>
<div id='calendar'></div>
<p>json-events.php needs to be running in the same directory.</p>
</body>
</html>
​
​
 
​
 
​
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers