Topic: mbd-calendar plugin
Actual behavior I am trying to transition from Full Calendar to the mbd-calendar plugin that I just bought and used npm to install.
I have my data coming as JSON from a php stream.
I renamed my columns in my JSON stream to the same names that would be used for the calendar events but that did not work.
I did npm install moment to make sure that was included.
Are dates only able to be added as hardcoded on the component.ts page?
Resources (screenshots, code snippets etc.)
Dates can be json, xml, google calendar, etc.. I don't use Angular but there is a snippet for js on the dynamically added events example. This is jquery/php (familiar for me lol) for json from php the script is
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: '2019-01-12',
editable: true,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
events: {
url: 'php/get-events.php',
error: function() {
$('#script-warning').show();
}
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
Angular version of this plugin works a little differently than the one available in jQuery. You can find more information and examples in our documentation:
I've read that documentation and would rather my data not be hard coded since I am running a website for a client who would like to update their own calendar without me having to put the dates into the website and recompile.
Maybe I am missing something but I do not see in the documentation where you can stream the data from an external source?
Never mind got it to work.
events: CalendarEvent[];
ngOnInit(){
this.http.get(`example.url`).subscribe((data: any) => {
for (let a = 0; a < data.length; a++) {
if (data[a].accepted) {
this.events.push({id: data[a].id, name: data[a].title, color: 'info', startDate: new Date(startOfDay(data[a].start)),
endDate: new Date(endOfDay(data[a].end))});
}
}
}
Miguel Callejas commented 5 years ago
your idea worked !, but now I do not know how to access to insert a new event
: '(
Another thing, did you know how to add new fields to the modal?
Arkadiusz Idzikowski staff commented 5 years ago
Dear Miguel,
As I mentioned in another topic, you won't be able to change event object properties because that would require editing the source code of the component.
To add new event programmatically you need to update the array of events that you pass to the mdb-calendar.
apseftis commented 5 years ago
For the modal you just have to copy the code from another field and change the names to what you need. I console logged the event object and figured out which properties to look for.
But I do also want to know if there is a way to make these events clickable without bringing up the edit. Are there more options available than just the ones in the documentation
Arkadiusz Idzikowski staff commented 5 years ago
All options are described in the documentation. Could you provide more information about the feature with clickable event?
apseftis commented 5 years ago
I would like to be able to only click events that are already on the calendar and have more details about that event show up.
Arkadiusz Idzikowski staff commented 5 years ago
I will add this feature to our nice-to-have list. Probably it will be impossible to add it on click because this function is already reserved for editing events, but we will think about the best solution for displaying more information (for example in tooltip).
apseftis commented 5 years ago
If you make a variable [editable] and set it to false to send to the component you would be able to right?
Arkadiusz Idzikowski staff commented 5 years ago
Yeah, we can just disable buttons and inputs in edit view.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.4.2
- Device: MacBook Pro
- Browser: any
- OS: Mojave
- Provided sample code: No
- Provided link: No