Created new calendarMonthViewType

Author: pclslopes

README.md

@@ -116,6 +116,7 @@ const calendar = new SimpleCalendar(calendarElement, {
 | `eventClick` | function | `null` | Callback for event clicks |
 | `stateChange` | function | `null` | Callback when calendar state changes |
 | `showBackground` | boolean | `false` | Show background colors |
+| `calendarMonthViewType` | string | `'MultiDay'` | Month view type: 'MultiDay' (show events) or 'SingleDay' (event backgrounds only) |
 | `headerBackgroundColor` | string | `null` | Custom header background color |
 | `bodyBackgroundColor` | string | `null` | Custom body background color |
 | `showTimeInEvent` | boolean | `true` | Display time in events |
@@ -148,6 +149,51 @@ const calendar = new SimpleCalendar(calendarElement, {
 }
 ```
 
+## Month View Types
+
+SimpleCalendarJs supports two distinct month view modes:
+
+### MultiDay Mode (Default)
+Shows events as text overlays on calendar days. This is the traditional calendar view where event titles are displayed within the day cells.
+
+```javascript
+const calendar = new SimpleCalendar('#calendar', {
+    calendarMonthViewType: 'MultiDay', // Default
+    data: [
+        {
+            start: '2024-11-15',
+            end: '2024-11-17', 
+            title: 'Conference',
+            backgroundColor: '#007bff'
+        }
+    ]
+});
+```
+
+### SingleDay Mode
+Shows event presence through background colors only. Day numbers are centered and no event text is displayed. This provides a clean, minimalist view that highlights which days have events.
+
+```javascript
+const calendar = new SimpleCalendar('#calendar', {
+    calendarMonthViewType: 'SingleDay',
+    data: [
+        {
+            start: '2024-11-15',
+            end: '2024-11-17',
+            title: 'Conference', // Title not displayed in SingleDay mode
+            backgroundColor: '#e0e0e0' // Custom color or defaults to gray variations
+        }
+    ]
+});
+```
+
+**SingleDay Mode Features:**
+- Day numbers are centered in the cell
+- Event backgrounds use subtle gray variations by default
+- No event text is displayed for a clean appearance  
+- Custom `backgroundColor` values in events are respected
+- Ideal for overview calendars or when space is limited
+
 ## UI Customization
 
 ### Visibility Controls
@@ -367,6 +413,7 @@ The state object contains:
 - `showTodayButton`: Today button visibility setting
 - `showMonthYear`: Month/year navigation visibility setting
 - `showModeButtons`: Mode buttons visibility setting
+- `calendarMonthViewType`: Month view type ('MultiDay' or 'SingleDay')
 
 ## Framework Integration
 

css/SimpleCalendarJs.css

@@ -1298,3 +1298,33 @@ html[data-bs-theme="dark"] .simple-calendar .view-dropdown-item.active {
 [data-bs-theme="dark"] .simple-calendar .outside .sc_date {
     color: #6b7280 !important;
 }
+
+/* ================================================
+   SINGLEDAY MODE STYLING
+   ================================================ */
+
+/* SingleDay mode: Center the day digits in calendar cells */
+.simple-calendar .calendar-day.single-day-mode {
+    text-align: center;
+    vertical-align: middle;
+    position: relative;
+}
+
+.simple-calendar .calendar-day.single-day-mode .sc_date {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    margin: 0;
+    line-height: 1;
+}
+
+/* Default background for days with events in SingleDay mode */
+.simple-calendar .calendar-day.single-day-mode.has-events {
+    background-color: rgba(0, 0, 0, 0.08) !important; /* Light gray tint */
+}
+
+/* Dark mode default background for days with events */
+[data-bs-theme="dark"] .simple-calendar .calendar-day.single-day-mode.has-events {
+    background-color: rgba(255, 255, 255, 0.12) !important; /* Light white tint in dark mode */
+}

index.html

@@ -66,7 +66,7 @@ <h5>Calendar Properties</h5>
                     <div class="card-body">
                         <div class="mb-3">
                             <div class="form-check form-switch">
-                                <input class="form-check-input" type="checkbox" id="showBackground" checked>
+                                <input class="form-check-input" type="checkbox" id="showBackground">
                                 <label class="form-check-label" for="showBackground">Show Background</label>
                             </div>
                         </div>
@@ -132,6 +132,13 @@ <h5>Calendar Properties</h5>
                                 <option value="day">Day</option>
                             </select>
                         </div>
+                        <div class="mb-3">
+                            <label for="calendarMonthViewType" class="form-label">Month View Type</label>
+                            <select class="form-select" id="calendarMonthViewType">
+                                <option value="MultiDay" selected>MultiDay (Show Events)</option>
+                                <option value="SingleDay">SingleDay (Event Backgrounds)</option>
+                            </select>
+                        </div>
                         <div class="mb-3">
                             <label for="calendarMonth" class="form-label">Month</label>
                             <select class="form-select" id="calendarMonth">

js/SimpleCalendarJs.js

@@ -141,7 +141,7 @@ const template = `{{
           {{ for (i = 0; i < 7; i++) { }}
           {{ console.log(date.toDateCssClass());}}
           {{ if (thedate > last) { dayclass = nextmonthcss; } else if (thedate >= first) { dayclass = thismonthcss; } }}
-          <td class="calendar-day {{: dayclass }} {{: thedate.toDateCssClass() }} {{: today.toDateCssClass() === thedate.toDateCssClass() ? 'currentdate sc_today_date':'' }} {{: daycss[i] }} js-cal-option add-day" data-date="{{: LiteralDate.toDateString(thedate) }}">
+          <td class="calendar-day {{: dayclass }} {{: thedate.toDateCssClass() }} {{: today.toDateCssClass() === thedate.toDateCssClass() ? 'currentdate sc_today_date':'' }} {{: daycss[i] }} {{: mode === 'month' && calendarMonthViewType === 'SingleDay' ? 'single-day-mode' : '' }} js-cal-option add-day" data-date="{{: LiteralDate.toDateString(thedate) }}">
             <div class="sc_date">{{: thedate.getDate() }}</div>
             {{ thedate.setDate(thedate.getDate() + 1);}}
 
@@ -440,6 +440,7 @@ class SimpleCalendar {
             lastmonthcss: "outside",
             nextmonthcss: "outside",
             mode: "month",
+            calendarMonthViewType: "MultiDay", // 'SingleDay' or 'MultiDay'
             useShortDays: false,
             showTimeInEvent: true,
             showBackground: false,
@@ -953,20 +954,26 @@ class SimpleCalendar {
             if (this.options.mode === 'year') {
                 this.yearAddEvents(this.options.data, this.options.date.getFullYear());
             } else if (this.options.mode === 'month' || this.options.mode === 'week') {
-                // Sort events so multi-day events are rendered first (at the top)
-                const sortedEvents = [...this.options.data].sort((a, b) => {
-                    const aIsMultiDay = a.end && !LiteralDate.isEqual(a.start, a.end);
-                    const bIsMultiDay = b.end && !LiteralDate.isEqual(b.start, b.end);
-                    
-                    // Multi-day events first, then by start date
-                    if (aIsMultiDay && !bIsMultiDay) return -1;
-                    if (!aIsMultiDay && bIsMultiDay) return 1;
+                if (this.options.mode === 'month' && this.options.calendarMonthViewType === 'SingleDay') {
+                    // SingleDay mode: Only apply background colors to days with events, don't render events
+                    this.applySingleDayBackgrounds(this.options.data);
+                } else {
+                    // MultiDay mode (default): Render events normally
+                    // Sort events so multi-day events are rendered first (at the top)
+                    const sortedEvents = [...this.options.data].sort((a, b) => {
+                        const aIsMultiDay = a.end && !LiteralDate.isEqual(a.start, a.end);
+                        const bIsMultiDay = b.end && !LiteralDate.isEqual(b.start, b.end);
+                        
+                        // Multi-day events first, then by start date
+                        if (aIsMultiDay && !bIsMultiDay) return -1;
+                        if (!aIsMultiDay && bIsMultiDay) return 1;
+                        
+                        // If both are same type, sort by start date
+                        return LiteralDate.parse(a.start) - LiteralDate.parse(b.start);
+                    });
 
-                    // If both are same type, sort by start date
-                    return LiteralDate.parse(a.start) - LiteralDate.parse(b.start);
-                });
-                
-                sortedEvents.forEach((event, index) => this.monthAddEvent(index, event));
+                    sortedEvents.forEach((event, index) => this.monthAddEvent(index, event));
+                }
             } else {
                 this.options.data.forEach((event, index) => this.dayAddEvent(index, event));
             }
@@ -1124,6 +1131,34 @@ class SimpleCalendar {
         }
     }
 
+    applySingleDayBackgrounds(events) {
+        // SingleDay mode: Apply background colors to days with events, don't render actual events
+        events.forEach((event) => {
+            const eventStart = LiteralDate.parse(event.start);
+            const eventEnd = event.end ? LiteralDate.parse(event.end) : eventStart;
+            
+            // Iterate through all days the event spans
+            let currentDate = new Date(eventStart);
+            while (currentDate <= eventEnd) {
+                const dayClass = LiteralDate.toCssClass(currentDate);
+                const dayElement = Dom.select('.' + dayClass, this.element);
+                
+                if (dayElement) {
+                    // Add a CSS class to indicate this day has events
+                    dayElement.classList.add('has-events');
+                    
+                    // Apply background color from event if specified
+                    if (event.backgroundColor) {
+                        dayElement.style.backgroundColor = event.backgroundColor;
+                    }
+                }
+                
+                // Move to next day
+                currentDate.setDate(currentDate.getDate() + 1);
+            }
+        });
+    }
+
     yearAddEvents(events, year) {
         const counts = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
         events.forEach((v) => {

js/script.js

@@ -32,7 +32,7 @@ function initializeCalendar() {
 
     var currentYear = parseInt(yearControl?.value) || new Date().getFullYear();
     var currentMonth = parseInt(monthControl?.value) || new Date().getMonth();
-    var calendarDate = new Date(currentYear, currentMonth, 1);
+    var calendarDate = new Date();
 
     const calendarElement = document.querySelector('#calendar');
     if (!calendarElement) {
@@ -53,6 +53,7 @@ function initializeCalendar() {
         showNavigation: document.querySelector('#showNavigation')?.checked !== false,
         theme: document.querySelector('#themeMode')?.value || 'auto',
         showBackground: document.querySelector('#showBackground')?.checked || false,
+        calendarMonthViewType: document.querySelector('#calendarMonthViewType')?.value || 'MultiDay',
         headerBackgroundColor: document.querySelector('#headerBgColor')?.value,
         bodyBackgroundColor: document.querySelector('#bodyBgColor')?.value,
         useShortDays: document.querySelector('#useShortDays')?.checked || false,
@@ -132,6 +133,14 @@ function setupPropertyControls() {
         });
     }
 
+    // Month view type selector
+    const monthViewTypeSelector = document.querySelector('#calendarMonthViewType');
+    if (monthViewTypeSelector) {
+        monthViewTypeSelector.addEventListener('change', function() {
+            refreshCalendar();
+        });
+    }
+
     // Month and year selectors
     addEventListeners('#calendarMonth, #calendarYear', 'change', function() {
         refreshCalendar();
@@ -235,6 +244,10 @@ function syncSandboxControls(state) {
     const themeControl = document.querySelector('#themeMode');
     if (themeControl) themeControl.value = state.theme;
 
+    // Update month view type selector to match calendar state
+    const monthViewTypeControl = document.querySelector('#calendarMonthViewType');
+    if (monthViewTypeControl) monthViewTypeControl.value = state.calendarMonthViewType || 'MultiDay';
+    
     // Update month and year to match calendar state
     if (state.date) {
         const monthControl = document.querySelector('#calendarMonth');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-calendar-js",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "A clean, modern, and feature-rich JavaScript calendar component with zero dependencies. Responsive design and intuitive navigation.",
   "main": "js/SimpleCalendarJs.js",
   "style": "css/SimpleCalendarJs.css",