Calendaring and scheduling in Servoy

Today we’re going to be talking about the calendar component. I should probably quit Slack so I don’t get interrupted and I’m going to launch a Example here okay, so This should be a fun demo for even people to have experience with this component because we’re also going to talk about How to add an extension to the component So first let’s cover the basics Pretty much you drag and drop this component on a form and you have to feed it some information and some configuration including events Which are the you know the actual event bubbles that show up on the calendar and some configurations about what views you want to have What you want to have in the header bar here etc? So we’ll go through that a bit Just the default here. I just put a few events on a calendar And we’re looking at it in month view we can switch to wheat view or day view You can see that when I go to day view I have some resources shown here. This is An extension that has the vertical resource view and we’ll talk about that in a minute In a few minutes, but looking at the wheat view here you can see that I can drag events I can resize them so I can change their duration I can also click on an event And you can see I have a custom editor here that I built as a regular form in Servoy and I could say Change the title And push that back into the calendar So with this basic example you can probably imagine how you want to hook this up to data and run with it So the next example I’ll show is how to make this data bound So in the data bound example we go to good old fashion example database the Northwind’s data With the orders coming from the 90s so you can see that I have set the calendar to this month but Back in 1997 So we get the orders showing up here and I’m just pooling that data out of the database The nice thing about about this approach is in the first example I just kind of programmatically stuck a few events on the calendar But here I’m actually feeding the events to the component from from the server as needed So as I page to the prior month or the next month Or I go through the weeks These are all at midnight by the way just because or I guess at noon Just because of they don’t really have a time associated But as you see that as I scroll through Um, excuse me, it’s paging in Those events from the servers. We’ll take a look at how to set that up as well Lastly I want to look at what we’re calling a scheduler view. This is an extension to the calendar component That it is a paid extension not not from Servoy. This is a third-party component So if you have a proper license and you can see that I do not because it’s showing up the please use valid license key Down here, but it’s easy to use with the trial But if you have the license key you can go into the scheduler view And you can see that I have a This is called a timeline view and I have it broken up by resources. So again, I’m pooling data from the database and I’m looking at 1997, but if these if these events actually had sometimes other than 12 p.m. We would see those events staggered about in You can move them around just the same you could even change resources in this case. I selected the shipper as the resource But you can you can drag the events around and then update your data with that and vice versa If I switch to the this is called the vertical resource view So we have timeline and vertical resource view You can see that the shippers are shown as columns and I’m looking at a single day Of course all of this is configurable I could look at Monday through Friday and still have the the groups of the resources But in this case, I’m just looking at a single day and you can see that as I scroll through the days I get excuse me the Events showing for the particular resource and again, I could drag those change the resource that would actually could change the shipper in the back end if I wanted to So a nice use case of this would be you’re managing A warehouse and you have shipments coming in and going out and you need to schedule When that’s happening? Per shipping dock and so we have customers with ERP applications that are doing just that and using this extension So we’ll take a look at how to set that up as well So let’s go under the hood and look at the first example the basic example I will close all of these and For some reason, I’m in the debugger because I was of course working on this in the last minutes There we go So I have a form called basic example And I’m going to open this in the form editor And the way that I set this up is I drag the full calendar onto the form and Pretty much a way we go When you look at the properties, there’s not much you need to set here really except for if you want to handle some of the events You can put those in as bindings Also, if you want to handle the layout here, which I’ve done just made it full size you can do that There is some ability to add CSS And there’s also a tool tip expression builder But I don’t have a demo for that one, but you can make dynamic dynamic tool tips As you can imagine they get passed down into the client So what I’ve done here if we look at if we open this in the code editor I now I’m overriding a base form So I’m just sort of piecing out a functionality of this to the subforms that I’ve created for those three examples But we can go into the base form as well, but I want to first talk about The event objects that we put into the calendar So this method get events or skits called when the calendar is being set up And you can see that it’s pretty simple It’s just an object within array called events And I just pass in some information some configuration about the events So the key pieces of information are the title that gets shown the start date and the end date You can also have the option for all day events, which I’ve put for false here You can see that the color is blue that’s for the whole series or the whole source of events So all three of them, but that could be overridden by one of these options here Now when we go into the the the base form You can see that if we go right to the very first time this is shown I’m calling a method init calendar and Here’s really all you have to do to set it up is um Call this full calendar method and passing options And then what I did is I added the events here, which called that method to get the events if we look at the options It’s just a configuration object and you can set it up with sort of like adjacent syntax But what I did is I I just made the object here and added the type tag for the full calendar options because then you get nice code complete And you can see that as I start typing I get all of the options that I can pass into that calendar for configuration So for example, I chose What to put in the header and these are the views that I’m supporting and this is in the base form So this gets inherited, but later I over rode that for the scheduler view I wanted all the calendars to be editable. So This is these allowed me to Click the events drag around. I can also select in the white space of the calendar if I wanted to make a new event So by enabling this I get those event callbacks that I set up Finally, I add the resources now the resources were in the simple example they were Just uh someone some that I made up in the data bound example they were the shippers So again, I’m using a bit of form inheritance here and if we look at the The basic example I did override get resources And you can see that again, this is just an array of simple objects, but you can have some nesting as well so In the the simplest form is just an ID in a title Um, but you can also have some nesting which when you go in the timeline view It shows up as a tree, which I didn’t have with the shippers, but I can show you that You can see that in the events. This is how we get bound to the event Uh, we just perhaps this one here. We pass in the resource ID and that’s what that’s what links it You can also have colors for your resources So if you wanted, you know, all of one shipper to show up in blue and another one to show up in green If you put it on the resource, then you can you can override it on the vent, but it’ll inherit it from the resource So there’s a lot you can do just with events and resources So that’s that’s really a simple example. I just I just did the calendar options The configuration the events and then the resources And that’s how I got This one If we look at the data bound option, remember these are paged in from the server And this is probably the way most people will use it, so I think it’s important to show how this works Again, I used form inheritance. So in the data bound example If I open this in script editor I the form layout is exactly the same by the way So I override the get-advent source method again Which which then gets passed into the calendar in the base form And here the difference is instead of just giving an array of event objects I’m actually passing in a little bit of configuration and then A callback method fetch events which gets called every time the calendar needs to Load more events So this method gets called for you For example, when you’re scrolling through the days weeks or months And it passes in the start and end for the range that you’re looking at Also, there can be a data object which is custom which you could apply some sort of filter But I’m not using that in this case. So here I I Create a simple query object In the the results of the query these are the things that I want to show in the event and in the where clause I’m putting in the that it’s greater than you know it’s between the start and the end-day Basically, I get my data set by query and then I build the events programmatically just by pushing them into an array And here is where I’m linking that event to the shipper. So the resource The resource ID is coming from this one here which is a foreign key column to the shipper Now that just gives me the ID so a little farther down. I’ve also overridden the get resources method And in this case, I’m just going out once and getting the shippers I have a value list already set up from Example data and so I just get that and that’s really a list of ID and display which is exactly what I need for the resources So I just iterate over that value list and you can see that I’m pushing in that simple object To load the resources. So I override those two methods. It’s fairly straightforward Another thing I did is I over rode the init calendar And I just told the calendar to jump to a date. I use this go-to-date method because all of the example data is really old So I wanted to just go to 1997 and then there’s a bunch of events there so that we don’t have to scroll Another thing that I didn’t show is that when I click one of these I actually I’m showing the order detail so again, I’m loading the data now So let’s look at at how we did that I over rode the on event click handler And I created a little form called order detail and I pass in this event object And pretty much I just load I just load the the found set with the ID of the event object Because that’s all I’m interested in and then I show it in a modal dialogue Of course If I’m editing it, I have to pass it back and I can show you that example From the basic one. So I didn’t really do that So in the basic one you’ll see that when I click here I was able to I could move the date And I can change this Click OK and you can see that it’s updated here In the example and the basic example When I handle the the on event click Oh, that’s in that’s in the base form. I over rode it here in the basic example Right here I had another little form called event editor And I do the same thing I pass in the event object, but in this case I copy Those properties into form variables Then I show the dialogue and then if the user clicked OK, I return back this object And back in the basic example form. This is where the The event gets pushed back into the calendar. I call elements.calendar.update event So you can programmatically Update an event that’s been edited So I would take the same approach if I was editing a record and say I rescheduled the order or changed the shipper And I wanted to show in a different resource I would just pass in sort of convert that event object back in and pass into the calendar I can update it directly there So that’s that’s pretty much the data bound example And then finally we had the scheduler view where we have both the The timeline view here which shows resources on the left and And the blocks on the right and we have the vertical resource view as it’s called which shows the The resources as columns So this is part of the extension And so here’s sort of an example of how to set this up now Everything I showed you up until the scheduler example works fine out of the box But you actually have to go and download the scheduler from full calendar And then plug it in so And we have documentation on the wiki for that But basically what I do is I go out onto the Full calendar website And you can see there’s a scheduler plug-in here and Basically need to to get the download from here And you get a little zip file with a JavaScript file on a CSS file and all I did is put those into my media And there’s two things you have to do one is you have to import the CSS So if you look at the CSS file for the whole solution I have something called calendar CSS and I import the scheduler CSS. It’s right there. I copied it into the media folder Then the other thing I have to do is I have to inject the JavaScript file And there’s a little trick for that If I look at the on-solution open event so when this application loads I call address file dependency And I have a method here which which just injects that using the ng client utils plug-in Creates a little tag and this is a standard way to do this and I believe this might even be in the sui utils Library so you don’t even have to write this method yourself I will make this solution available on the forum after the webinar so you don’t need to Memorize all this But pretty much you add the the scheduler JavaScript file by injecting it on on startup and you add the The style sheet through an import on the CSS file for the for the solution that puts all the dependencies you need there And then finally You want to show those views. I have this scheduler example here if I look at the Get options where I overrode the get out. This is all I the only code I added that the scheduler one is I I Sort of overrode the header where I was saying what views show and I’ve added timeline day and agenda day and agenda day automatically Shows up Instead of the regular day view as the vertical resource view and so that’s really all you have to do to set it up There’s also adding the The license key. This is just sort of like the trial license, but you’ll eventually you would get if you purchase it You would get the commercial license and and plug it in there One thing that I wanted to show you was also The resources with the hierarchy if I Add these to back to the base form so that it’s everywhere on the Get options I Mean it just relaunch this Now when I go to it’s a bit confusing because they’re all named the same But now when I look at I believe it would be This one there we go now you can see that there is Collapsible group here so if you have hierarchies you just add the Remember you add the the children in the resource and it shows up a group like this so you could really get You can really get specific with how you group events

Close