+
+
+
+
+
+
+
diff --git a/personal_organiser/static/src/img/bin.png b/personal_organiser/static/src/img/bin.png
new file mode 100644
index 000000000..c51c50c9a
Binary files /dev/null and b/personal_organiser/static/src/img/bin.png differ
diff --git a/personal_organiser/static/src/img/checklist.png b/personal_organiser/static/src/img/checklist.png
new file mode 100644
index 000000000..b314af595
Binary files /dev/null and b/personal_organiser/static/src/img/checklist.png differ
diff --git a/personal_organiser/static/src/img/note-taking.png b/personal_organiser/static/src/img/note-taking.png
new file mode 100644
index 000000000..e9c9db2e9
Binary files /dev/null and b/personal_organiser/static/src/img/note-taking.png differ
diff --git a/personal_organiser/static/src/img/support.png b/personal_organiser/static/src/img/support.png
new file mode 100644
index 000000000..4f3f9a341
Binary files /dev/null and b/personal_organiser/static/src/img/support.png differ
diff --git a/personal_organiser/static/src/img/weekend.png b/personal_organiser/static/src/img/weekend.png
new file mode 100644
index 000000000..379e29455
Binary files /dev/null and b/personal_organiser/static/src/img/weekend.png differ
diff --git a/personal_organiser/static/src/scss/mixins.scss b/personal_organiser/static/src/scss/mixins.scss
new file mode 100644
index 000000000..10896ed1c
--- /dev/null
+++ b/personal_organiser/static/src/scss/mixins.scss
@@ -0,0 +1,7 @@
+@mixin disable-scrollbar {
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+}
diff --git a/personal_organiser/static/src/scss/variables.dark.scss b/personal_organiser/static/src/scss/variables.dark.scss
new file mode 100644
index 000000000..1b9631bb7
--- /dev/null
+++ b/personal_organiser/static/src/scss/variables.dark.scss
@@ -0,0 +1,2 @@
+$appbar-color: #E4E4E4 !default;
+$appbar-background: #3C3E4B !default;
diff --git a/personal_organiser/static/src/scss/variables.scss b/personal_organiser/static/src/scss/variables.scss
new file mode 100644
index 000000000..767686b0c
--- /dev/null
+++ b/personal_organiser/static/src/scss/variables.scss
@@ -0,0 +1,3 @@
+$appbar-color: #dee2e6 !default;
+$appbar-active: $o-brand-primary !default;
+$appbar-background: #111827 !default;
diff --git a/personal_organiser/static/src/webclient/calender/calender.js b/personal_organiser/static/src/webclient/calender/calender.js
new file mode 100644
index 000000000..c16457750
--- /dev/null
+++ b/personal_organiser/static/src/webclient/calender/calender.js
@@ -0,0 +1,93 @@
+/** @odoo-module **/
+import { Component, useState } from '@odoo/owl';
+import { useService } from '@web/core/utils/hooks';
+
+export class MiniCalendar extends Component {
+ "Component to deal with calendar events"
+ static template = 'personal_organiser.mini_calendar';
+
+ setup() {
+ this.orm = useService('orm');
+ this.currentDate = new Date();
+ this.state = useState({
+ daysInMonth: [], // Days in the current month with event flags
+ selectedDate: null, // Currently selected date
+ selectedDayEvents: [], // Events for the selected date
+ });
+
+ this.loadEvents(); // Load all events on component setup
+ }
+
+ // Method to load events from the backend
+ async loadEvents() {
+ const today = this.formatDate(new Date()); // Current date in YYYY-MM-DD format
+ try {
+ // Fetch events that start after today
+ this.events = await this.orm.searchRead("calendar.event", [
+ ["start_date", ">=", today],
+ ]);
+ } catch (error) {
+ console.error("Error loading events:", error);
+ }
+ this.updateCalendar(); // Update the calendar once events are loaded
+ }
+
+ // Method to update the calendar view with event flags
+ updateCalendar() {
+ const year = this.currentDate.getFullYear();
+ const month = this.currentDate.getMonth();
+ const lastDate = new Date(year, month + 1, 0).getDate();
+
+ // Generate days for the current month and check if they have events
+ this.state.daysInMonth = Array.from({ length: lastDate }, (_, day) => {
+ const currentDay = day + 1;
+ const currentDate = new Date(year, month, currentDay);
+ const hasEvent = this.events.some(event => {
+ const eventDateString = event.start_date;
+ const eventDate = new Date(`${eventDateString}T00:00:00`);
+ const normalizedEventDate = new Date(eventDate.getFullYear(),
+ eventDate.getMonth(), eventDate.getDate());
+ const normalizedCurrentDate = new Date(currentDate.getFullYear(),
+ currentDate.getMonth(), currentDate.getDate());
+ return normalizedEventDate.getTime() === normalizedCurrentDate.getTime();
+ });
+ return {
+ date: currentDate,
+ hasEvent,
+ };
+ });
+ }
+
+ // Method to handle day selection and load events for the selected day
+ async selectDay(day) {
+ this.state.selectedDate = day.date;
+ await this.fetchEventsForDay(day.date); // Fetch events for the selected day
+ }
+
+ // Fetch events for the selected day
+ async fetchEventsForDay(date) {
+ try {
+ const dateStr = this.formatDate(date); // Format the date as YYYY-MM-DD
+ const events = await this.orm.searchRead('calendar.event', [
+ ['start_date', '=', dateStr], // Query events for this date
+ ], ['name', 'description', 'start_date']);
+
+ this.state.selectedDayEvents = events; // Set the events for the selected day
+ } catch (error) {
+ console.error("Error fetching events:", error);
+ }
+ }
+
+ // Helper function to format date as YYYY-MM-DD (handling timezone correctly)
+ formatDate(date) {
+ // Set the time to 00:00:00 for consistency
+ date.setHours(0, 0, 0, 0);
+
+ // Format the date to YYYY-MM-DD
+ const year = date.getFullYear();
+ const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
+ const day = String(date.getDate()).padStart(2, '0');
+
+ return `${year}-${month}-${day}`;
+ }
+}
diff --git a/personal_organiser/static/src/webclient/calender/calender.scss b/personal_organiser/static/src/webclient/calender/calender.scss
new file mode 100644
index 000000000..e25f38da3
--- /dev/null
+++ b/personal_organiser/static/src/webclient/calender/calender.scss
@@ -0,0 +1,97 @@
+/* The main container for the calendar */
+.calendar {
+ float: left;
+ background-color: #f7f7f7; /* Light background color for better contrast */
+ justify-content: space-between;
+ white-space: nowrap;
+ height: 100%;
+ padding-top: 20px;
+ padding-bottom: 20px; /* Added padding for better spacing */
+ border-radius: 8px; /* Rounded corners */
+}
+
+/* Mini Calendar container */
+.mini-calendar {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%; /* Ensure it takes full available width */
+ max-width: 400px; /* Optional: limits the width on large screens */
+ margin: auto; /* Centering the calendar */
+}
+
+/* Calendar header */
+.calendar-header {
+ margin-bottom: 10px;
+ text-align: center;
+ font-size: 1.2em;
+ font-weight: bold;
+}
+
+/* Grid layout for the calendar days */
+.calendar-days {
+ display: grid;
+ grid-template-columns: repeat(7, 1fr); /* 7 days in a week */
+ gap: 5px;
+ width: 100%;
+}
+
+/* Individual day cell */
+.calendar-day {
+ height: 40px; /* Increased the height for better visibility */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 1px solid #ddd;
+ border-radius: 50%; /* Circular appearance for days */
+ font-size: 1em; /* Adjust font size */
+ transition: background-color 0.3s, transform 0.2s; /* Smooth transition for hover */
+ cursor: pointer; /* Show pointer cursor when hovering */
+ margin: 2px; /* Slight margin to create a gap between the cells */
+}
+
+/* Hover effect for clickable days */
+.calendar-day:hover {
+ background-color: #e0e0e0; /* Lighter background on hover */
+ transform: scale(1.1); /* Slight scale effect when hovered */
+}
+
+/* Highlight days with events (with a slight gap) */
+.calendar-day.calendar-event {
+ background-color: #4caf50; /* Green background for days with events */
+ color: white;
+ font-weight: bold;
+ margin: 5px; /* Add margin for gap between event days */
+}
+
+/* Selected day styling */
+.calendar-day.selected {
+ background-color: #2196f3; /* Blue color for selected day */
+ color: white;
+ font-weight: bold;
+}
+
+/* Event cards section */
+.event-cards .card {
+ margin-bottom: 10px;
+ border: 1px solid #ccc;
+ padding: 10px;
+ border-radius: 8px;
+ background-color: #fff;
+ box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
+}
+
+.event-cards .card-title {
+ font-weight: bold;
+ font-size: 1.1em;
+}
+
+.event-cards .card-text {
+ font-size: 0.9em;
+ color: #555;
+}
+
+.event-cards .text-muted {
+ font-size: 0.8em;
+ color: #777;
+}
diff --git a/personal_organiser/static/src/webclient/calender/calender.xml b/personal_organiser/static/src/webclient/calender/calender.xml
new file mode 100644
index 000000000..de49fc846
--- /dev/null
+++ b/personal_organiser/static/src/webclient/calender/calender.xml
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Efficiently manage one's notes, tasks, and events. +
+Personal Organiser +
+
+ 
+
+
+
+
+ 
+ Email Us
+
+
+ 
+ Skype Us
+
+
+
+ Email Us
+
+
+
+ Skype Us
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Key + Highlights
+
+
+
+
+
+ 
+
+
+ + Note maker +
++ Take a quick note from any view..
+
+
+
+
+
+
+
+
+ + Task manager +
++ Manage your tasks and todo's more efficiently. +
+
+
+
+
+
+
+
+
+ + Address book +
++ Manage all contacts from here. +
+
+
+
+
+
+
+
+
+
+ + Calender +
++ Calender for a quick view of of tasks and todo's.
+
+
+
+
+
+
+
+
+
+ Personal Organiser
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ + Sidebar + + Menu +
+
+
+ + All notemaker, task manager, calender, and contacts were available in the sidebar. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Create New + + Task +
+
+
+ + Here you can add tasks with date. + Created tasks can be seen below as a list. + Options available to edit and delete tasks. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Create + Notes +
+
+
+ + Here you can add notes with title. + Created notes can be seen below as a list. + Options available to edit and delete notes. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Your + + Contacts +
+
+
+ + Here you can see all your contacts. + Also an option available to create a new one. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Calender + + + View +
+
+
+ + Here you can view all your tasks and + todo's in a calender view. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Take a quick note from any view.
+
+
+
+
+
+
+
+
+
+ + Manage your tasks and todo's more efficiently.
+
+
+
+
+
+
+
+
+
+ + Manage all contacts from here.
+
+
+
+
+
+
+
+
+
+ + Calender for a quick view of of tasks and todo's. +
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 29th January, 2025 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + + +
+
+ + Related Products +
+ +
+ 
+ 
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No days to display.
+
+
+Events on
+
+ +
Events on
+
+
+
+
+
+
+
+
+
+
+
No events for this day.
+
+ Notes
+
+
+
+
+
+
+
+
+
+
+ Notes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+