Calendar plugin

vitticeps asked 5 years ago

Hi,

I really like the calendar plugin but on the way it is.. is a bit useful. I can see answers in related questions - and can see that the modal is not editable.

Can I disable the 'default' event handler modal? If I could write my own modals to the add / edit / remove events - would be the best... as in different projects I have different tasks to do (book holiday / book a delivery... etc).. So then I could use it in several projects. Currently I cannot.. I should write my own calendar plugin for that..

Thanks in advance, vitticeps


vitticeps answered 5 years ago

I think it would be beneficial for many of us :)


vitticeps answered 5 years ago

To add/remove/edit - Could trigger a @ViewChild (just to keep it simple..) by the onDayClick / onEventClick etc events - then we could manage our modals / actions.

Would it be possible to make this 'smaller' change?


vitticeps answered 5 years ago

I found the workaround:

node_moduls/mdb-calender/fesm2015/mdb-calender.js in MdbCalendarComponent class - need to add two new eventEmitter: dayClick / eventClick

this.dayClick = new EventEmitter();

It needs to be added to MdbCalendarComponent.propDecorators

dayClick: [{ type: Output }],

and then add this to the onDayClick(day) function

this.dayClick.emit(day);

in the app.component.html and app.component.ts - now you can call these events like

<mdb-calendar (dayClick)="dayClickLog($event)"....

in the ts file you have the function like

dayClickLog(event: any) {
    console.log(event) // You received back the day object - you can open your own modal and inject these data.. or extend this data and have additional funcitons...
}

Same with the eventClick.

MDB team - could you put this in place on the other folders (esm5, fesm5...) as well? So others can benefit from it?

Thanks, vitticeps


vitticeps commented 5 years ago

BTW - in the onDayClick function in the component file - need to remove/comment out the following:

this.openAddModal(day);

so then the default modal will not pop up..


vitticeps answered 5 years ago

I modified bundles / esm2015 / esm5 / fesm2015 / fesm5 files accordingly. If you consider to build into and want to have a look - I can forward them... (dont want to publish).. I built a new tgz file name 8.0.1..


Arkadiusz Idzikowski staff answered 5 years ago

Glad you found a workaround for the problem.

The plan for the original version of the plugin was to create a simple version of the calendar with a possibility of adding simple events.

Currently we have no plans to extend this functionality. We will consider updating the plugin, but I'm afraid that the update won't be available in the nearest future. Thank you for the detailed description of the possible fix, we will take it into account.


vitticeps commented 5 years ago

Thanks Arkadiusz for the feedback. I am happy to use it with my 'extensions'... The base you provided is excellent :) ;)

Now I can manage more complex bookings in a calendar view directly... Cool :)


vitticeps commented 5 years ago

Well, I will add one more bit - sometimes I do not need the 'list view' / 'weekly view' or the 'today button'... So will make it able to hide them using ngIf..


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.0.0
  • Device: any
  • Browser: any
  • OS: ant
  • Provided sample code: No
  • Provided link: No
Tags