JSFiddle - React, Tailwind, and code Playground

by dakra

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<!doctype html>
<html ng-app="dialog">
  <head>
    <title>Full Calendar Test</title>
    <link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/1510510/temp/demo/fullcalendar.css"></link>
    <script src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js" ng:autobind></script>
    <script src="http://dl.dropbox.com/u/1510510/temp/demo/fullcalendar.min.js"></script> 
   
  </head>
  <body ng-controller="MainCtrl">
               <div full-calendar events="events"></div>
  </body>
</html>

CSS

.fc-header-title h2 {
    font-size: .9em;
    white-space: normal !important;
}
.fc-view-month .fc-event, .fc-view-agendaWeek .fc-event {
    font-size: 10px;
    overflow: hidden;
    height: 20px;
}
.fc-view-agendaWeek .fc-event-vert {
    font-size: 0;
    
    width: 2px !important;
}
.fc-agenda-axis {
    width: 20px !important;
    font-size: .7em;
}

.fc-button-content {
    padding: 0;
}

.dateSelectors{
  float:left;
  margin-top:20px;
}

JavaScript

function MainCtrl($scope) {
    
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
  

     // For DEMO only  This can be created however you please. 
     // *************
     $scope.events = [
            {
            title: 'All Day Event',
            start: new Date(y, m, 1)},
            {
            title: 'Long Event',
            start: new Date(y, m, d - 5),
            end: new Date(y, m, d - 2)},
            {
            id: 999,
            title: 'Repeating Event',
            start: new Date(y, m, d - 3, 16, 0),
            allDay: false},
            {
            id: 999,
            title: 'Repeating Event',
            start: new Date(y, m, d + 4, 16, 0),
            allDay: false},
            {
            title: 'Meeting',
            start: new Date(y, m, d, 10, 30),
            allDay: false},
            {
            title: 'Lunch',
            start: new Date(y, m, d, 12, 0),
            end: new Date(y, m, d, 14, 0),
            allDay: false},
            {
            title: 'Birthday Party',
            start: new Date(y, m, d + 1, 19, 0),
            end: new Date(y, m, d + 1, 22, 30),
            allDay: false},
            {
            title: 'Click for Google',
            start: new Date(y, m, 28),
            end: new Date(y, m, 29),
            url: 'http://google.com/'
        }]
}

myApp = angular.module('dialog', []);

//Calendar Directive that takes in live events as an attribute and then calls the fullCalendar method to render the events correctly. 
myApp.directive('fullCalendar', function() {

    return {
                restrict : "A",
                replace : true,
                transclude : true,
                scope: {
                  events: '='
                },   

    template : 

                "<div id=\"calendar\" style=\"margin-left:200px;height:350px;width:50%\"></div>",

                link : function( scope,$element, $attrs )...