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
  • …
 
<html>
    <head>
       <meta charset='utf-8' />
       <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.css" type="text/css" />
       <!--<link rel="stylesheet" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.print.css" type="text/css">-->
       <!--<script src="assets/plugins/jquery-1.10.2.js"></script>-->
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
       <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.js"></script>
       <script>
            moment().format();
​
            function httpGet(url) {
                var xmlHttp = new XMLHttpRequest();
                xmlHttp.open("GET", url, false);
                xmlHttp.send(null);
                return xmlHttp.responseText;
            }
​
            $(document).ready(function () {
​
                // page is now ready, initialize the calendar...
​
                //var eventsArray = JSON.parse(httpGet("Schedule.php"));
​
                $('#calendar').fullCalendar({
                    // put your options and callbacks here
                    //timezone: 'America/Denver',
                    header: {
                        left:   '',
                        center: 'title',
                        right:  ''
                    },
                    theme:true,
                    events: [
                        {
                            "title":"Washer & Dryer",
                            "editable":false,
                            "start":"2017-04-09T00:30:00-0600",
                            "end":"2017-04-09T06:30:00-0600",
                            "img_loc":"washer.png"
                        },
                        {
                            "title":"Dishwasher",
                            "editable":false,
                            "start":"2017-04-09T02:56:00-0600",
                            "end":"2017-04-09T04:56:00-0600",
                            "img_loc":"dishwasher.jpg"
                        }
                    ],
                    defaultView: "agendaDay"
                })
​
            });
​
        </script>
        <style type='text/css'>
            #calendar {
            width: 900px;
            margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div id='calendar'></div>
    </body>
</html>
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers