Add calendar view.

app/Http/Controllers/Recurring/IndexController.php

@@ -70,10 +70,6 @@ class IndexController extends Controller
      */
     public function calendar(Request $request)
     {
-        $date            = new Carbon;
-        $daysOfWeek      = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
-        //$firstDayOfMonth = mktime(0, 0, 0, $month, 1, $year);
-
         return view('recurring.calendar');
     }
 

public/js/ff/recurring/create.js

@@ -40,12 +40,27 @@ $(document).ready(function () {
     $('#calendar-link').on('click', showRepCalendar);
 });
 
+/**
+ *
+ */
 function showRepCalendar() {
-
+    $('#recurring_calendar').fullCalendar(
-    // fill model with calendar:
+        {
-
+            defaultDate: '2018-06-13',
-
+            editable: false,
-    $('#defaultModal').modal({});
+            height: 400,
+            width: 200,
+            contentHeight: 300,
+            aspectRatio: 1.25,
+            eventLimit: true, // allow "more" link when too many events
+            events: [
+                {
+                    title: '',
+                    start: '2018-06-14'
+                }
+            ]
+        });
+    $('#calendarModal').modal('show');
     return false;
 }
 

public/lib/fc/fullcalendar.print.css

@@ -0,0 +1,176 @@
+/*!
+ * FullCalendar v3.9.0
+ * Docs & License: https://fullcalendar.io/
+ * (c) 2018 Adam Shaw
+ */
+/*!
+ * FullCalendar v3.9.0 Print Stylesheet
+ * Docs & License: https://fullcalendar.io/
+ * (c) 2018 Adam Shaw
+ */
+/*
+ * Include this stylesheet on your page to get a more printer-friendly calendar.
+ * When including this stylesheet, use the media='print' attribute of the <link> tag.
+ * Make sure to include this stylesheet IN ADDITION to the regular fullcalendar.css.
+ */
+.fc {
+  max-width: 100% !important; }
+
+/* Global Event Restyling
+--------------------------------------------------------------------------------------------------*/
+.fc-event {
+  background: #fff !important;
+  color: #000 !important;
+  page-break-inside: avoid; }
+
+.fc-event .fc-resizer {
+  display: none; }
+
+/* Table & Day-Row Restyling
+--------------------------------------------------------------------------------------------------*/
+.fc th,
+.fc td,
+.fc hr,
+.fc thead,
+.fc tbody,
+.fc-row {
+  border-color: #ccc !important;
+  background: #fff !important; }
+
+/* kill the overlaid, absolutely-positioned components */
+/* common... */
+.fc-bg,
+.fc-bgevent-skeleton,
+.fc-highlight-skeleton,
+.fc-helper-skeleton,
+.fc-bgevent-container,
+.fc-business-container,
+.fc-highlight-container,
+.fc-helper-container {
+  display: none; }
+
+/* don't force a min-height on rows (for DayGrid) */
+.fc tbody .fc-row {
+  height: auto !important;
+  /* undo height that JS set in distributeHeight */
+  min-height: 0 !important;
+  /* undo the min-height from each view's specific stylesheet */ }
+
+.fc tbody .fc-row .fc-content-skeleton {
+  position: static;
+  /* undo .fc-rigid */
+  padding-bottom: 0 !important;
+  /* use a more border-friendly method for this... */ }
+
+.fc tbody .fc-row .fc-content-skeleton tbody tr:last-child td {
+  /* only works in newer browsers */
+  padding-bottom: 1em;
+  /* ...gives space within the skeleton. also ensures min height in a way */ }
+
+.fc tbody .fc-row .fc-content-skeleton table {
+  /* provides a min-height for the row, but only effective for IE, which exaggerates this value,
+     making it look more like 3em. for other browers, it will already be this tall */
+  height: 1em; }
+
+/* Undo month-view event limiting. Display all events and hide the "more" links
+--------------------------------------------------------------------------------------------------*/
+.fc-more-cell,
+.fc-more {
+  display: none !important; }
+
+.fc tr.fc-limited {
+  display: table-row !important; }
+
+.fc td.fc-limited {
+  display: table-cell !important; }
+
+.fc-popover {
+  display: none;
+  /* never display the "more.." popover in print mode */ }
+
+/* TimeGrid Restyling
+--------------------------------------------------------------------------------------------------*/
+/* undo the min-height 100% trick used to fill the container's height */
+.fc-time-grid {
+  min-height: 0 !important; }
+
+/* don't display the side axis at all ("all-day" and time cells) */
+.fc-agenda-view .fc-axis {
+  display: none; }
+
+/* don't display the horizontal lines */
+.fc-slats,
+.fc-time-grid hr {
+  /* this hr is used when height is underused and needs to be filled */
+  display: none !important;
+  /* important overrides inline declaration */ }
+
+/* let the container that holds the events be naturally positioned and create real height */
+.fc-time-grid .fc-content-skeleton {
+  position: static; }
+
+/* in case there are no events, we still want some height */
+.fc-time-grid .fc-content-skeleton table {
+  height: 4em; }
+
+/* kill the horizontal spacing made by the event container. event margins will be done below */
+.fc-time-grid .fc-event-container {
+  margin: 0 !important; }
+
+/* TimeGrid *Event* Restyling
+--------------------------------------------------------------------------------------------------*/
+/* naturally position events, vertically stacking them */
+.fc-time-grid .fc-event {
+  position: static !important;
+  margin: 3px 2px !important; }
+
+/* for events that continue to a future day, give the bottom border back */
+.fc-time-grid .fc-event.fc-not-end {
+  border-bottom-width: 1px !important; }
+
+/* indicate the event continues via "..." text */
+.fc-time-grid .fc-event.fc-not-end:after {
+  content: "..."; }
+
+/* for events that are continuations from previous days, give the top border back */
+.fc-time-grid .fc-event.fc-not-start {
+  border-top-width: 1px !important; }
+
+/* indicate the event is a continuation via "..." text */
+.fc-time-grid .fc-event.fc-not-start:before {
+  content: "..."; }
+
+/* time */
+/* undo a previous declaration and let the time text span to a second line */
+.fc-time-grid .fc-event .fc-time {
+  white-space: normal !important; }
+
+/* hide the the time that is normally displayed... */
+.fc-time-grid .fc-event .fc-time span {
+  display: none; }
+
+/* ...replace it with a more verbose version (includes AM/PM) stored in an html attribute */
+.fc-time-grid .fc-event .fc-time:after {
+  content: attr(data-full); }
+
+/* Vertical Scroller & Containers
+--------------------------------------------------------------------------------------------------*/
+/* kill the scrollbars and allow natural height */
+.fc-scroller,
+.fc-day-grid-container,
+.fc-time-grid-container {
+  /* */
+  overflow: visible !important;
+  height: auto !important; }
+
+/* kill the horizontal border/padding used to compensate for scrollbars */
+.fc-row {
+  border: 0 !important;
+  margin: 0 !important; }
+
+/* Button Controls
+--------------------------------------------------------------------------------------------------*/
+.fc-button-group,
+.fc button {
+  display: none;
+  /* don't display any button-related controls */ }

public/lib/fc/fullcalendar.print.min.css

@@ -0,0 +1,9 @@
+/*!
+ * FullCalendar v3.9.0
+ * Docs & License: https://fullcalendar.io/
+ * (c) 2018 Adam Shaw
+ *//*!
+ * FullCalendar v3.9.0 Print Stylesheet
+ * Docs & License: https://fullcalendar.io/
+ * (c) 2018 Adam Shaw
+ */.fc-bg,.fc-bgevent-container,.fc-bgevent-skeleton,.fc-business-container,.fc-event .fc-resizer,.fc-helper-container,.fc-helper-skeleton,.fc-highlight-container,.fc-highlight-skeleton{display:none}.fc tbody .fc-row,.fc-time-grid{min-height:0!important}.fc-time-grid .fc-event.fc-not-end:after,.fc-time-grid .fc-event.fc-not-start:before{content:"..."}.fc{max-width:100%!important}.fc-event{background:#fff!important;color:#000!important;page-break-inside:avoid}.fc hr,.fc tbody,.fc td,.fc th,.fc thead,.fc-row{border-color:#ccc!important;background:#fff!important}.fc tbody .fc-row{height:auto!important}.fc tbody .fc-row .fc-content-skeleton{position:static;padding-bottom:0!important}.fc tbody .fc-row .fc-content-skeleton tbody tr:last-child td{padding-bottom:1em}.fc tbody .fc-row .fc-content-skeleton table{height:1em}.fc-more,.fc-more-cell{display:none!important}.fc tr.fc-limited{display:table-row!important}.fc td.fc-limited{display:table-cell!important}.fc-agenda-view .fc-axis,.fc-popover{display:none}.fc-slats,.fc-time-grid hr{display:none!important}.fc button,.fc-button-group,.fc-time-grid .fc-event .fc-time span{display:none}.fc-time-grid .fc-content-skeleton{position:static}.fc-time-grid .fc-content-skeleton table{height:4em}.fc-time-grid .fc-event-container{margin:0!important}.fc-time-grid .fc-event{position:static!important;margin:3px 2px!important}.fc-time-grid .fc-event.fc-not-end{border-bottom-width:1px!important}.fc-time-grid .fc-event.fc-not-start{border-top-width:1px!important}.fc-time-grid .fc-event .fc-time{white-space:normal!important}.fc-time-grid .fc-event .fc-time:after{content:attr(data-full)}.fc-day-grid-container,.fc-scroller,.fc-time-grid-container{overflow:visible!important;height:auto!important}.fc-row{border:0!important;margin:0!important}

resources/views/recurring/calendar.twig

@@ -0,0 +1,16 @@
+<div class="modal-dialog modal-lg">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h4 class="modal-title">Calendar view yay</h4>
+        </div>
+        <div class="modal-body">
+            <div id="recurring_calendar">
+
+            </div>
+
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        </div>
+    </div>
+</div>

resources/views/recurring/create.twig

@@ -164,15 +164,41 @@
         </div>
         #}
     </form>
+
+    {# calendar modal #}
+    <div class="modal fade" id="calendarModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Calendar view yay</h4>
+            </div>
+            <div class="modal-body">
+                <div id="recurring_calendar" style="max-width: 400px;margin: 0 auto;">
+
+                </div>
+
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+    </div>
+
+
+
+
 {% endblock %}
 {% block scripts %}
     <script type="text/javascript" src="js/lib/modernizr-custom.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/lib/jquery-ui.min.js?v={{ FF_VERSION }}"></script>
+    <script type="text/javascript" src="lib/fc/fullcalendar.min.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript">
         var transactionType = "{{ preFilled.transaction_type }}";
         var suggestUri = "{{ route('recurring.suggest') }}";
+        var eventsUri = "{{ route('recurring.eventss') }}";
     </script>
     <script type="text/javascript" src="js/ff/recurring/create.js?v={{ FF_VERSION }}"></script>
 {% endblock %}
@@ -181,4 +207,5 @@
     <link href="css/bootstrap-tagsinput.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet" media="all">
     <link href="css/jquery-ui/jquery-ui.structure.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet" media="all">
     <link href="css/jquery-ui/jquery-ui.theme.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet" media="all">
+    <link href="lib/fc/fullcalendar.min.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet" media="all">
 {% endblock %}

routes/web.php

@@ -618,7 +618,7 @@ Route::group(
 
     Route::get('', ['uses' => 'IndexController@index', 'as' => 'index']);
     Route::get('suggest', ['uses' => 'IndexController@suggest', 'as' => 'suggest']);
-    Route::get('calendar', ['uses' => 'IndexController@calendar', 'as' => 'calendar']);
+    Route::get('events', ['uses' => 'IndexController@events', 'as' => 'events']);
     Route::get('show/{recurrence}', ['uses' => 'IndexController@show', 'as' => 'show']);
     Route::get('create', ['uses' => 'CreateController@create', 'as' => 'create']);
     Route::get('edit/{recurrence}', ['uses' => 'EditController@edit', 'as' => 'edit']);