Add interactive calendar widget to ServiceNow portal (#1598)

- Added calendar structure with month navigation, current day, and weekend highlights
- Implemented `$scope.loadCalendar()` function to dynamically load days for selected month and year
- CSS styling for calendar layout
- JavaScript for month navigation and day calculations
- Included `ng-init` to load calendar on widget initialization
- Known issue: Ensure `ng-init` directive is present if dates do not load initially

Author: Southpaw09

Service Portal Widgets/Calendar widget/README.md

@@ -0,0 +1,41 @@
+# Calendar Widget for ServiceNow Portal
+This widget creates a simple, interactive calendar for the ServiceNow portal, allowing users to navigate through months and view the current day highlighted. It displays the days of the month in a grid layout.
+
+## Features
+Monthly Navigation: Buttons for navigating between months.
+Current Day Highlighting: The current date is highlighted in light blue.
+Responsive Layout: The calendar adjusts to fit within the widget container.
+
+## Usage
+
+HTML Structure: The main HTML structure displays month navigation buttons and the days in a grid layout.
+
+CSS Styling: CSS styles define the appearance of the calendar, including a shadowed border, day alignment.
+
+JavaScript Controller:
+
+Defines the calendar's navigation functionality.
+Calculates and displays the days of the selected month.
+Highlights today’s date if it is within the selected month.
+
+## Code Structure
+### Controller (api.controller):
+Initializes the month and year to display the current month.
+Provides functions to navigate to the previous and next month.
+Calculates the days of the selected month and highlights the current date.
+### CSS:
+.calendar-widget: The main container for the calendar.
+.calendar-header: Contains the month name and navigation buttons.
+
+## Customization
+### Highlight Colors:
+Modify .current-day in the CSS to change the color for today’s date.
+Month Names and Day Names:
+Update the $scope.monthNames and $scope.dayNames arrays to localize or customize the labels.
+
+### Example Usage
+In the ServiceNow portal, add this widget to display an interactive calendar. This can be embedded in any dashboard or custom page where date visualization is needed.
+
+## Known Issues
+Initial Load: If dates do not display immediately, ensure the ng-init="loadCalendar()" directive is included in the main container.
+Date Accuracy: The calendar currently starts with today's date. If dates appear incorrect, check the $scope.loadCalendar() function for accurate month and day calculations.

Service Portal Widgets/Calendar widget/index.html

@@ -0,0 +1,17 @@
+<div class="calendar-widget" ng-init="loadCalendar()">
+    <div class="calendar-header">
+        <button ng-click="prevMonth()">&#9664;</button>
+        <span>{{ monthNames[currentMonth] }} {{ currentYear }}</span>
+        <button ng-click="nextMonth()">&#9654;</button>
+    </div>
+
+    <div class="calendar-days">
+        <div class="day-name" ng-repeat="day in dayNames">{{ day }}</div>
+        <div 
+            class="day" 
+            ng-repeat="day in days track by $index" 
+            ng-class="{'current-day': isCurrentDay(day), 'weekend': isWeekend($index), 'regular-day': day}">
+            {{ day }}
+        </div>
+    </div>
+</div>

Service Portal Widgets/Calendar widget/script.js

@@ -0,0 +1,60 @@
+api.controller = function($scope) {
+    // Month and day names
+    $scope.monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    $scope.dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+    // Initialize the current month, year, and days
+    var today = new Date();
+    $scope.currentMonth = today.getMonth();
+    $scope.currentYear = today.getFullYear();
+    $scope.days = [];
+
+    // Load the calendar days
+    $scope.loadCalendar = function() {
+        $scope.days = [];
+        
+        // Calculate the first and last day of the month
+        var firstDay = new Date($scope.currentYear, $scope.currentMonth, 1).getDay();
+        var lastDate = new Date($scope.currentYear, $scope.currentMonth + 1, 0).getDate();
+        
+        // Add empty days for alignment (for days before the 1st of the month)
+        for (var i = 0; i < firstDay; i++) {
+            $scope.days.push('');
+        }
+        
+        // Add days of the month
+        for (var day = 1; day <= lastDate; day++) {
+            $scope.days.push(day);
+        }
+    };
+
+    // Check if the day is today
+    $scope.isCurrentDay = function(day) {
+        return day == today.getDate() && $scope.currentMonth == today.getMonth() && $scope.currentYear == today.getFullYear();
+    };
+
+    // Navigate to the previous month
+    $scope.prevMonth = function() {
+        if ($scope.currentMonth === 0) {
+            $scope.currentMonth = 11;
+            $scope.currentYear--;
+        } else {
+            $scope.currentMonth--;
+        }
+        $scope.loadCalendar();
+    };
+
+    // Navigate to the next month
+    $scope.nextMonth = function() {
+        if ($scope.currentMonth === 11) {
+            $scope.currentMonth = 0;
+            $scope.currentYear++;
+        } else {
+            $scope.currentMonth++;
+        }
+        $scope.loadCalendar();
+    };
+
+    // Initialize the calendar for the current month
+    $scope.loadCalendar();
+};

Service Portal Widgets/Calendar widget/style.css

@@ -0,0 +1,48 @@
+.calendar-widget {
+    width: 100%;
+    max-width: 300px;
+    margin: auto;
+    font-family: Arial, sans-serif;
+    border: 1px solid #ddd;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
+}
+
+.calendar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: #f4f4f4;
+    font-weight: bold;
+}
+
+.calendar-header button {
+    background: none;
+    border: none;
+    font-size: 1.2em;
+    cursor: pointer;
+}
+
+.calendar-days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    text-align: center;
+}
+
+.day-name {
+    font-weight: bold;
+    padding: 5px 0;
+    color: #555;
+}
+
+.day {
+    padding: 10px 0;
+    border: 1px solid #f0f0f0;
+}
+
+.current-day {
+    background-color: #d3e9ff;
+    font-weight: bold;
+    color: #333;
+    border-radius: 50%;
+}