How to create a calendar similar to Outlook or Google with Month View?

I need to assign tasks in this calendar whith respective dates and color according if this tasks are finished or in progrees.
I don’t found information about this and how to assign script for the tasks.

I need edit this Month Viewer.

I don’t think you will find a pre-built component/module that will do exactly what you are looking for.

You could, however, build one with a properly-style powertable (squared-looking cells), plus scripting, and a database/REST backend. You could also use a Canvas component and draw the calendar layout programatically.

Cheers,

Oscar.

Sounds like a job for a template canvas, with the layout set up as a month grid of days. Programmatically generate the dataset for the canvas to pass the dates to the instances, and let the template obtain its calendar entries from the database. Use an alternate template (same size) where the grid would show days from the prior or subsequent month.

I don’t use ‘Month View’ for my problem? the client currently used this calendar, So I need modified according your requirements. only needs implement tasks wiht start date, end date, Title and description for te task.

Sorry for not being very clear from the beginning.

Ok. Then you need to manipulate the dataset programmatically. Where is the calendar data currently coming from? A query on your database? If so, you need scripts to update the data in the database, then refresh the binding on the calendar.
We’ll need a lot more information about your calendar data to be more specific.

Yes is a query on my database and this is de table.

Please show the query binding SQL that is supplying your data currently, not a Management Studio screenshot of the raw data you think is needed. However, do describe how the raw data needs to be interpreted to compute the color information you wish to use.

I took Mr. Turmel’s suggestion and implemented a (limited) calendar GUI using a template canvas with ‘CalendarCell’ Templates. Each cell has the numeric day at the top right and a field for text. Mapping your DB data into those cells would be up to you. I can upload an export of this if you’d like to take a look.

2 Likes

Great solution. Please upload and share!

Here you go:

CEC_Calendar_Templates.proj (19.1 KB)

Good luck!

1 Like

Thanks, I tries to execute the file but it does not work for me.
I have version 7.8

its possible to send an .proj version 7.8?

and

@pturmel my query is :

SELECT
QPMComent,
PMStat,
PMUser,
Created
FROM
PMSCHED

I need use this columns

Thanks.

Quick disclaimer, I can’t guarantee this won’t somehow screw anything up, but you can try opening the .proj file in a text editor and changing the version there. At the top it has

<version>
  <major>7</major>
  <minor>9</minor>
  <rev>5</rev>
  <build>2017111615</build>
</version>

I don’t know if you need to change the build to a valid date too but in the past when I had an older version than a .proj file said here, I just changed it to match my version.

1 Like

[quote=“anibal.marquez, post:11, topic:16778”]@pturmel my query is :

SELECT
QPMComent,
PMStat,
PMUser,
Created
FROM
PMSCHED

I need use this columns
[/quote]Well, there isn’t sufficient information there to supply what the calendar needs for start and end timestamps. Please show the existing binding SQL that produced the calender in your original post. Then explain how the columns you have available need to be interpreted for colors. What does PMStat=1 mean and what other values can PMStat have?

@bfuson, how do you give that format to the dataset?

Did you check the script bindings? That dataset gets generated depending on the month.

yes, but for some reason I can’t find the script biding, they are empty, where do you have that script? Or could you write it here to try to understand it?

Look in the Designer Project Browser to see what components have property or script bindings.
The picture you posted above is of a property binding, not a script binding.
Components with property bindings have the chain link icon beside them.
Components with scripting functions attached have the paper icon beside them.

So looking at that, we can see scripting is done on ‘Button’, ‘Button 1’, and ‘Template Canvas’
Those buttons are the navigation buttons at the top left and right.
Their scripts are in the actionPerformed event handlers, so they fire when clicked.

Here’s the button code:

event.source.parent.BaseDate = system.date.addMonths(event.source.parent.BaseDate, 1)
event.source.parent.getComponent("Template Canvas").init()

You can see the system.date.addMonths function is used to move the BaseDate custom property forwards or backwards by a month. Then the init() custom method on the Template Canvas is called.

Looking at init(), you can see it’s doing all the generation work:

def init(self):
	month = system.date.getMonth(self.parent.BaseDate)
	year = system.date.getYear(self.parent.BaseDate)
		
	start = system.date.getDate(year, month, 1)
	end = system.date.addMonths(system.date.getDate(year, month, 1), 1)	
	templates_headers = ['name', 'template', 'layout', 'x', 'y', 'width', 'height', 'parameters']
	templates_dataset = []
	index_date = start
	row, col, daynum = 0, 0, 1
		
	row = 0
	while index_date != end:
		dayOfWeek = system.date.getDayOfWeek(index_date)
		col = dayOfWeek - 1
		name = 'day' + str(daynum)
	
		template = []
		template.append('day'+str(daynum))
		template.append("Calendar/CalendarCell")
		template.append("cell %d %d" % (col, row))
		template.extend(["0","0","0","0"])
		template.append("{'day':'%s', 'text':'%s'}" % (str(system.date.getDayOfMonth(index_date)), ''))
		templates_dataset.append(template)
		
		index_date = system.date.addDays(index_date, 1)
		daynum += 1
		if dayOfWeek == 7:
			row += 1
	self.templates = system.dataset.toDataSet(templates_headers, templates_dataset)

This could benefit from some commenting… So there’s some code to iterate over all the days in the month of the BaseDate property. For each day, it generates a row for the ‘templates’ dataset that the Template Canvas uses for rendering its templates. That’s where you’d likely want to add your custom calls to your database so that you can input the text of your db events as the ‘text’ parameter of the CalendarDay template. If you look at the ‘template_headers’ variable you can see the format/order that the data needs to be in. The final column in the dataset is for parameters passed to the individual template. This needs to be a python dictionary that maps parameter names to their values.

Taking a closer look:

template.append("{'day':'%s', 'text':'%s'}" % (str(system.date.getDayOfMonth(index_date)), ''))

So the ‘day’ number that gets used is from the index_date, which is iterating through all the days of the current month during generation. The ‘text’ parameter comes right after, but is currently being mapped to a blank string, indicated by the two apostrophes (’’).

So you need to query PMSCHED for the text to show on that particular date, and put the result where those apostrophes are.