diff --git a/Service Portal Widgets/Calendar widget/README.md b/Service Portal Widgets/Calendar widget/README.md new file mode 100644 index 0000000000..0a644f3a2a --- /dev/null +++ b/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. \ No newline at end of file diff --git a/Service Portal Widgets/Calendar widget/index.html b/Service Portal Widgets/Calendar widget/index.html new file mode 100644 index 0000000000..e5d6d48406 --- /dev/null +++ b/Service Portal Widgets/Calendar widget/index.html @@ -0,0 +1,17 @@ +
+
+ + {{ monthNames[currentMonth] }} {{ currentYear }} + +
+ +
+
{{ day }}
+
+ {{ day }} +
+
+
diff --git a/Service Portal Widgets/Calendar widget/script.js b/Service Portal Widgets/Calendar widget/script.js new file mode 100644 index 0000000000..7f6a036d37 --- /dev/null +++ b/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(); +}; diff --git a/Service Portal Widgets/Calendar widget/style.css b/Service Portal Widgets/Calendar widget/style.css new file mode 100644 index 0000000000..2cf02694b4 --- /dev/null +++ b/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%; +}