#1171: The `textarea` is showing and is working as intended for the purpose of

creating and updating the calendar event.

BUG: carriage returns don't seem to work
WIP: the text is hardcoded as of now, have to use Messages library for
translations.

www/calendar/app-calendar.less

@@ -209,9 +209,13 @@
         .tui-full-calendar-section-date-dash {
             height: auto;
         }
-        .tui-full-calendar-section-title, .tui-full-calendar-section-location {
+        .tui-full-calendar-section-title, .tui-full-calendar-section-location, .tui-full-calendar-section-description {
             width: 100%;
         }
+        .tui-full-calendar-section-description textarea {
+            width: 100%;
+            height: 200px;
+        }
         .tui-full-calendar-dropdown-menu {
             top: 38px;
             width: 221px; // same as button

www/calendar/inner.js

@@ -99,6 +99,7 @@ define([
     };
     var newEvent = function (event, cb) {
         var reminders = APP.notificationsEntries;
+        var description = APP.description;
 
         var startDate = event.start._date;
         var endDate = event.end._date;
@@ -113,6 +114,7 @@ define([
             isAllDay: event.isAllDay,
             end: +endDate,
             reminders: reminders,
+            description: description,
             recurrenceRule: event.recurrenceRule
         };
 
@@ -283,6 +285,7 @@ define([
                 var obj = data.content[uid];
                 obj.title = obj.title || "";
                 obj.location = obj.location || "";
+                obj.description = obj.description || "";
                 if (obj.isAllDay && obj.startDay) { obj.start = +Flatpickr.parseDate((obj.startDay)); }
                 if (obj.isAllDay && obj.endDay) {
                     var endDate = Flatpickr.parseDate(obj.endDay);
@@ -1023,6 +1026,9 @@ ICS ==> create a new event with the same UID and a RECURRENCE-ID field (with a v
                 if (JSONSortify(oldRec || '') !== JSONSortify(rec)) {
                     changes.recurrenceRule = rec;
                 }
+
+                var description = APP.description;
+                changes.description = description;
             }
 
 
@@ -1900,7 +1906,6 @@ APP.recurrenceRule = {
     var getNotificationDropdown = function () {
         var ev = APP.editModalData;
         var calId = ev.selectedCal.id;
-        // DEFAULT HERE [10] ==> 10 minutes before the event
         var id = (ev.id && ev.id.split('|')[0]) || undefined;
         var _ev = APP.calendar.getSchedule(ev.id, calId);
         var oldReminders = _ev && _ev.raw && _ev.raw.reminders;
@@ -2008,6 +2013,41 @@ APP.recurrenceRule = {
         ]);
     };
 
+    var getDescriptionInput = function() {
+        var ev = APP.editModalData;
+        var calId = ev.selectedCal.id;
+        // DEFAULT HERE [10] ==> 10 minutes before the event
+        var id = (ev.id && ev.id.split('|')[0]) || undefined;
+        var _ev = APP.calendar.getSchedule(ev.id, calId);
+        var oldDescription = _ev && _ev.raw && _ev.raw.description;
+        if (!oldDescription) {
+            oldDescription = Util.find(APP.calendars, [calId, 'content', 'content', id, 'description']) || "";
+        }
+
+        APP.description = oldDescription;
+        var description = h('textarea.tui-full-calendar-content', {
+            placeholder: 'Description', // TODO: replace with Message.calendar_description
+            id: 'tui-full-calendar-description',
+        });
+
+        description.value = oldDescription;
+
+        var updateDescription = function(value) {
+            APP.description = value;
+        };
+
+        var $description = $(description);
+        $description.on('input', function() {
+            updateDescription(description.value);
+        });
+
+        return h('div.tui-full-calendar-popup-section.tui-full-calendar-vlayout-area', [
+            h('div.tui-full-calendar-popup-section-item.tui-full-calendar-section-description', [
+                description,
+            ]),
+        ]);
+    };
+
     var createToolbar = function () {
         var displayed = ['useradmin', 'newpad', 'limit', 'pageTitle', 'notifications'];
         var configTb = {
@@ -2118,6 +2158,9 @@ APP.recurrenceRule = {
             var div = getNotificationDropdown();
             $button.before(div);
 
+            var descriptionInput = getDescriptionInput();
+            $startDate.parent().parent().before(descriptionInput);
+
             // Use Flatpickr with or without time depending on allday checkbox
             var $cbox = $el.find('#tui-full-calendar-schedule-allday');
             var allDay = $cbox.is(':checked');