JSFiddle - React, Tailwind, and code Playground

by Carlos Cariello

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular.min.js"></script>
<script src="https://twinssbc.github.io/AngularJS-ResponsiveCalendar/dist/js/calendar-tpls.js"></script>
<link rel="stylesheet" href="https://twinssbc.github.io/AngularJS-ResponsiveCalendar/dist/css/calendar.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container" ng-app="calendarDemoApp" >
  <div class="row" ng-controller="CalendarDemoCtrl" ng-init="loadEvents()">
     <calendar ng-model="currentDate" calendar-mode="mode" event-source="eventSource"
                          range-changed="reloadSource(startTime, endTime)"
                          event-selected="onEventSelected(event)"
                          time-selected="onTimeSelected(selectedTime, events)" step="30"></calendar>
  </div>  
</div>

JavaScript

angular.module('calendarDemoApp', ['ui.rCalendar']);

Date.prototype.addHours = function(h) {
  this.setTime(this.getTime() + (h*60*60*1000));
  return this;
}

angular.module('calendarDemoApp').controller('CalendarDemoCtrl', ['$scope', function ($scope) {
    'use strict';
    $scope.changeMode = function (mode) {
        $scope.mode = mode;
    };

    $scope.today = function () {
        $scope.currentDate = new Date();
    };

    $scope.isToday = function () {
        var today = new Date(),
            currentCalendarDate = new Date($scope.currentDate);

        today.setHours(0, 0, 0, 0);
        currentCalendarDate.setHours(0, 0, 0, 0);
        return today.getTime() === currentCalendarDate.getTime();
    };

    $scope.loadEvents = function () {
        $scope.eventSource = addCustomEvent();
    };

    $scope.onEventSelected = function (event) {
        $scope.event = event;
    };

    $scope.onTimeSelected = function (selectedTime, events) {
        console.log('Selected time: ' + selectedTime + ' hasEvents: ' + (events !== undefined && events.length !== 0));
    };


	  function addCustomEvent(){
    		var events = [];
        var startTime = new Date();
        var endTime = angular.copy( startTime ).addHours(2);
        
    		events.push({
                    title: 'Reserva de Sala 2h',
                    startTime: startTime,
                    endTime: endTime,
                    allDay: false
                });
                
        return events;
    
    }
    
}]);