I am trying to add a new calendar icon on `systray` (top right corner of odoo web client). When i click on the calendar icon i need to display a datepicker and collect the clicked date into the js? How can i do this?

NB: Sorry guys, i am tried xml code so many times. but after save, the source code show as HTML content instead of source code

I tried the below code

/xml/*.xml

*.js
odoo.define('calendar_demo.calendar.systray.ActivityMenu',function (require){
"use strict";
console.log('am here');
var core = require('web.core');
var session = require('web.session');
var SystrayMenu = require('web.SystrayMenu');
var Widget = require('web.Widget');
var QWeb = core.qweb;
const { DatePicker, DateTimePicker } = require('web.DatePickerOwl');
console.log('DatePicker',DatePicker);
var Datepicker = require('web.datepicker');
console.log('datepicker',Datepicker);
const { Component } = owl;
var CalendarMenu = Widget.extend({
name: 'calendar_menu',
template:'calendar_demo.calendar.systray.ActivityMenu',


start: function(){
this._$calendarPreview = this.$('.o_calendar_systray_dropdown_items');
console.log('inside start function');
var self = this;
// self._$calendarPreview.html(QWeb.render('web.datepicker', {// When i use this line ith shows input textbox only
self._$calendarPreview.html(QWeb.render('calendar_demo.calendar.systray.ActivityMenu.Calendar', {// When i use this line its show balnk area
widget: self
}));
return this._super();
},
});
console.log('CalendarMenu',CalendarMenu);
SystrayMenu.Items.push(CalendarMenu);


return CalendarMenu

//The below code not executing
Datepicker.include({
// console.log();
// console.log('inside datepicker funciton');
_onInputClicked:function(){
console.log('_onInputClicked------------');
this._super();
},
});

});