+
+
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+ 
+
+
+ + Website Event Calendar View
++ Navigate Events through Website Calendar + +
+
+
+
+
+
+ 
+
+
+ + Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Overview +
+
+
+
+
+
+ Give users the ability to simply track events on the calendar by date
+ and to quickly access the event directly from the calendar.
+
+
+
+
+ 
+
+
+ + Features +
+
+
+
+
+
+
+
+ 
+ Enterprise and Community compatible.
+
+
+ Enterprise and Community compatible.
+
+
+ Able to recognise the event between a certain date on the calendar.
+
+
+ Able to recognise the event between a certain date on the calendar.
+
+
+ Easily discern the events which are unpublished.
+
+
+ Easily discern the events which are unpublished.
+
+
+ Can easily navigate to the event through calendar list.
+
+
+ Can easily navigate to the event through calendar list.
+
+
+
+ 
+
+
+ + Screenshots +
+
+
+
+
+
+
+
+
+ 
+
+ + Event Calendar menu in Website +
++ User can view all events from this menu Events Calendar.
+
+
+ 
+
+ + Date wise Events. +
++ User can easily track events by date wise.
+
+
+ 
+
+ + User can easily navigate to the event from the calendar on + one click. +
+
+
+ 
+
+ + Unpublished Events. +
++ User can easily identify the unpublished events.
+
+
+
+
+ 
+
+
+ + Related + Products +
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+ 
+
+
+ + Our Services +
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+ 
+
+
+ + Our + Industries +
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+ 
+
+
+ + Support +
+
+
+
\ No newline at end of file
diff --git a/web_events_calendar_view/static/src/css/calender.scss b/web_events_calendar_view/static/src/css/calender.scss
new file mode 100644
index 000000000..6b1fe520b
--- /dev/null
+++ b/web_events_calendar_view/static/src/css/calender.scss
@@ -0,0 +1,78 @@
+h3{
+ font-size:3rem;
+ font-weight:bold;
+ color:#c68307;
+}
+.s_event_calendar_list {
+ .event_details{
+ margin-bottom:7px;
+ }
+ .event_list_title{
+ font-size:1.25rem;
+ font-weight:bold;
+ }
+ .event_title {
+ border: 0 solid $table-border-color;
+ border-bottom-width: 1px;
+ a{
+ color: #333;
+ }
+ }
+
+ .s_event_calendar {
+ .bootstrap-datetimepicker-widget {
+ width: 100%;
+ }
+
+ .day:not(.active):not(:hover):not(.disabled) {
+ background-color: #FFDEAD;
+ font-weight:bold;
+ }
+ }
+ .day:not(.active):hover{
+ background: #ff7b54;
+ color:#FFFFFF ;
+ }
+ .day.active,.day.active:hover{
+ background-color: #000000;
+ color:#FFFFFF
+ }
+ td.today:not(.active)::before {
+ border-bottom-color: #cf2e2e !important;
+ }
+
+ .category::before {
+ content: "| ";
+ }
+ .event_btn{
+ background-color: #fff;
+ color:#3D3935;
+ border:2px solid;
+ border-color:#AB2328;
+ }
+ animation: unset !important;
+ opacity: 1 !important;
+ background-size: 1500px auto;
+ padding-top: 50px;
+ padding-bottom: 46px;
+ @media screen and(min-width:768px) {
+ table{
+ height:475px;
+ td{
+ padding: 1rem !important;
+ }
+ }
+
+ .event_list_column{
+ padding-left:50px;
+ padding-top:70px;
+ .s_event_list{
+ margin-top:15px;
+
+ }
+ }
+ .cal_heading{
+ padding-bottom:20px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/web_events_calendar_view/static/src/js/calendar.js b/web_events_calendar_view/static/src/js/calendar.js
new file mode 100644
index 000000000..4b205a1d2
--- /dev/null
+++ b/web_events_calendar_view/static/src/js/calendar.js
@@ -0,0 +1,146 @@
+odoo.define('web_events_calendar_view.calendar', function (require) {
+ "use strict";
+ var animation = require('website.content.snippets.animation');
+ var core = require("web.core");
+ var time = require("web.time");
+ var ajax = require("web.ajax");
+ var DATE_FORMAT = time.strftime_to_moment_format("%Y-%m-%d");
+ var DATETIME_FORMAT = time.strftime_to_moment_format(
+ "%Y-%m-%d %H:%M:%S");
+ var INVERSE_FORMAT = "L";
+
+ var CustomCalendar = animation.Class.extend({
+ selector: ".s_event_calendar_list",
+ init: function () {
+ this.datepickerOptions = {
+ inline: true,
+ minDate: moment().subtract(100, "years"),
+ maxDate: moment().add(100, "years"),
+ icons: {
+ previous: "fa fa-chevron-left",
+ next: "fa fa-chevron-right",
+ },
+ format: DATE_FORMAT,
+ useCurrent: false,
+ locale: moment.locale(),
+ };
+ return this._super.apply(this, arguments);
+ },
+
+ start: function (editableMode) {
+ this._super.apply(this, arguments);
+
+ if (editableMode) {
+ return;
+ }
+ this.selectedDates = {
+ min: null,
+ max: null,
+ matches: [],
+ };
+
+ this.$calendar = this.$target.find('.s_event_calendar')
+ .on("change.datetimepicker", $.proxy(this, "dateSelected"))
+ .on("update.datetimepicker", $.proxy(this, "calendarMoved"));
+ this.$list = this.$target.find(".s_event_list");
+ this.defaultAmount = Number(this.$(".js_amount").html()) || 4;
+ this.dateFormat = this.$list.data("dateFormat") || "LLL";
+ // Get initial events to render the list
+ this.loadEvents(null, this.defaultAmount)
+ .then($.proxy(this, "renderList"));
+ // Preload dates and render the calendar
+ this.preloadDates(moment())
+ .then($.proxy(this, "renderCalendar"));
+ },
+
+ dateSelected: function (event) {
+ this.loadEvents(event.date.format(DATE_FORMAT))
+ .then($.proxy(this, "renderList"));
+ },
+
+ calendarMoved: function (event) {
+ if (event.change !== "M") {
+ // We only care when months are displayed
+ return;
+ }
+ // Preload dates if needed and show evented days
+ this.preloadDates(event.viewDate);
+ },
+
+ preloadDates: function (when) {
+ var margin = moment.duration(4, "months");
+ // Don't preload if we have up to 4 months of margin
+ if (
+ this.selectedDates.min && this.selectedDates.max &&
+ this.selectedDates.min <= when - margin &&
+ this.selectedDates.max >= when + margin
+ ) {
+ return $.Deferred().resolve();
+ }
+ // Default values
+ margin.add(2, "months");
+ var start = moment(when - margin),
+ end = moment(when + margin);
+ // If we already preloaded, preload 6 more months
+ if (this.selectedDates.min) {
+ start.subtract(6, "months");
+ }
+ if (this.selectedDates.max) {
+ end.add(6, "months");
+ }
+ // Do the preloading
+ return this.loadDates(start, end);
+ },
+
+ loadDates: function (start, end) {
+ return ajax.rpc(
+ "/web_events_calendar_view/days_with_events",
+ {
+ start: start.format(DATE_FORMAT),
+ end: end.format(DATE_FORMAT),
+ }
+ ).then($.proxy(this, "updateDatesCache", start, end));
+ },
+
+ updateDatesCache: function (start, end, dates) {
+ if (!this.selectedDates.min || this.selectedDates.min > start) {
+ this.selectedDates.min = start;
+ }
+ if (!this.selectedDates.max || this.selectedDates.max < end) {
+ this.selectedDates.max = end;
+ }
+ this.selectedDates.matches = _.union(this.selectedDates.matches, dates);
+ },
+
+ loadEvents: function (day, limit) {
+ return ajax.rpc(
+ "/web_events_calendar_view/events_for_day",
+ {day: day, limit: limit}
+ );
+ },
+
+ renderCalendar: function () {
+ var enabledDates = _.map(this.selectedDates.matches, function (ndate) {
+ return moment(ndate, DATE_FORMAT);
+ });
+ this.$calendar.empty().datetimepicker(_.extend({},
+ this.datepickerOptions, {'enabledDates': enabledDates}));
+ },
+
+ renderList: function (events) {
+ this.$list.html(core.qweb.render(
+ "web_events_calendar_view.list",
+ {events: events}
+ ));
+ },
+ });
+
+ animation.registry.web_events_calendar_view = CustomCalendar;
+
+ return {
+ CustomCalendar: CustomCalendar,
+ DATE_FORMAT: DATE_FORMAT,
+ DATETIME_FORMAT: DATETIME_FORMAT,
+ INVERSE_FORMAT: INVERSE_FORMAT,
+ };
+});
diff --git a/web_events_calendar_view/static/src/xml/templates.xml b/web_events_calendar_view/static/src/xml/templates.xml
new file mode 100644
index 000000000..437cecd32
--- /dev/null
+++ b/web_events_calendar_view/static/src/xml/templates.xml
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ Loading...
+
+
+
+
+
+
+ Calendar visible only when you save
+
+
+
+
+
+
+
+ Event list visible only when you save.
+It will display up to the closest 4 events. +
+
+
+
+
+
+
+
+
+
+
+
+ Events Calendar
+
+
+
+
+
+
+
+