Own view with recurrent and map tab

Scheduler Javascript
#1

Hi there

Im trying to make a calendar view with recurring events and the map-tab.

[code]

<script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<script src="../../codebase/ext/dhtmlxscheduler_map_view.js" type="text/javascript" charset="utf-8"></script>
<script src="../../codebase/ext/dhtmlxscheduler_recurring.js" type="text/javascript" charset="utf-8"></script>
<script src="../../codebase/ext/dhtmlxscheduler_year_view.js" type="text/javascript" charset="utf-8"></script>

<script src="../../sources/locale_de.js" type="text/javascript" charset="utf-8"></script>
<script src="../../sources/locale_recurring_de.js" type="text/javascript" charset="utf-8"></script>


<link rel="stylesheet" href="../../codebase/dhtmlxscheduler.css" type="text/css" title="no title" charset="utf-8">

<style type="text/css" media="screen">
	html, body{
		margin:0px;
		padding:0px;
		height:100%;
		overflow:hidden;
	}	
</style>

<script type="text/javascript" charset="utf-8">
	function init() {
	
		scheduler.config.xml_date="%Y-%m-%d %H:%i";
		scheduler.config.prevent_cache = true;
		
		scheduler.locale.labels.map_tab = "Map";
		scheduler.locale.labels.section_location = "Location";
		
		scheduler.xy.map_date_width = 180; // date column width
		scheduler.xy.map_description_width = 400; // description column width
		
		
		scheduler.config.lightbox.sections=[	
			{ name:"description", height:50, map_to:"text", type:"textarea", focus:true },
			{ name:"location", height:43, map_to:"event_location", type:"textarea"  },
			{ name:"time", height:72, type:"time", map_to:"auto"}	
		]
		
		scheduler.config.map_inital_zoom = 8;
		
		scheduler.init('scheduler_here',new Date(2010,8,1),"map");
		scheduler.load("php/events_map_view.php");

		dp = new dataProcessor("php/events_map_view.php");
		dp.init(scheduler);
				
	}	
</script>

<script type="text/javascript" charset="utf-8">
function init() {

	// Map



	// Recurrent
	scheduler.config.xml_date="%Y-%m-%d %H:%i";
	scheduler.config.prevent_cache = true;
	
	scheduler.config.details_on_create=true;
	scheduler.config.details_on_dblclick=true;

	scheduler.init('scheduler_here',new Date(2010,9,29),"month");
	scheduler.load("php/events_rec.php");
	
	var dp = new dataProcessor("php/events_rec.php");
	dp.init(scheduler);
		
}
</script>
 
 
[/code]

But the tab “Map” doesn’t show the label. It’s an emtpy tab…
please tell me what’s wrong.

And by the way; great calendar! Thank you.

#2

Hello,

First of all please note that you have defined two function with the name ‘init’. You should have only one of them and put the code in one of them as well.

Another problem - map view is same as agenda view in regards that both of them try to display events with no end date. Such thing won’t work correctly with recurring view where we actually have events with no end date.

You can do following:

[code]// updating dates to display on before view change
scheduler.attachEvent(“onBeforeViewChange”, function(old_mode, old_date, new_mode, new_date) {
scheduler.config.map_start = scheduler.date.month_start(new Date((new_date||old_date).valueOf()));
scheduler.config.map_end = scheduler.date.add(scheduler.config.map_start, 1, “month”);
return true;
});

// defining add function for prev/next arrows
scheduler.date.add_map = function(date, inc) {
return scheduler.date.add(date, inc, “month”);
};

// defining date header
var format = scheduler.date.date_to_str("%Y-%m-%d");
scheduler.templates.map_date = function(start, end, mode){
return format(start)+" — "+format(end);
};[/code]
Kind regards,
Ilya

#3

Thank you Ilya!

Now everything works. I hope my code is correct and clean, please take a look into:

http://pastebin.com/b5NM70WT

#4

Addition:

The google maps location data isn’t write back to data_r.xml :cry:

I need assistance…

#5

Got it!

Add the line in bold:

scheduler.data_attributes = function(){ var empty = function(a){ return a||""; } return [["id"], ["text"], ["start_date",scheduler.templates.xml_format], ["end_date",scheduler.templates.xml_format], ["rec_type",empty], ["event_length",empty], ["event_pid",empty], [b]["event_location",empty]];[/b]

#6

Oh man, still issues :confused:

I have to click twice on the “Map” tab, otherwise the Google Map doesn’t show the position of the entrys on the left
.
If you click only once, the pointer is somewhere in nowhere.

Whats wrong now?

#7

Hello,

Please attach code you are using right now.

Kind regards,
Ilya

#8

Hi Ilya

Thank you for the reply.

I put the code on pastebin, its to big for the code-tag here.

pastebin.com/xvvHqUEB

#9

Hello,

You’ve made incorrect init function to begin with, while there is only one of it you still call scheduler.init two times.
I’ve updated this part, please check:
http://pastie.org/3480370

Kind regards,
Ilya

#10

No success with your code :cry:

In IE 9 i got an error-popup.

#11

Hello,

Complete code in my case:
pastie.org/3487235

Please note commented lines and several paths to events xml were changed.
Works fine for me.
If it doesn’t work for you - at least provide error message and line number.

Kind regards,
Ilya

#12

Hi Ilya

Thank you again for your assistance.
I have crated a new html file with your code (copy&paste&customize). But there are still phenomens. The events in the map view- list blinking in bold-font once :question:

And the locations weren’t show if i click them. I send you an URL on PM.

#13

Hello,

Do you store events coordinates in your DB?
With
scheduler.config.map_resolve_event_location = true;
option enabled scheduler for all events without coordinates info (lat and lng) will try to get their coordinates one by one and save to the database. Option is designed to make migration easier - in case you have locations, but missing coordinates. It’s intended to be used only once as all future events will get their coordinates the moment you save them. And you are expected to store that information, getting it everytime is not a good option.

Same, could happen if there were no coordinates.

Kind regards,
Ilya

#14

Yes im storing the location as text in the xml file.

<event_location><![CDATA[Street 12, 6020 Emmenbrücke, Schweiz]]></event_location>
#15

What about ‘lat’ and ‘lng’?

Kind regards,
Ilya

#16

You mean the line

scheduler.config.map_resolve_event_location = true;

add lat and lng to the xml file?

I don’t know at which line i had to add the code :blush:

#17

Now i have added the line you say.

The result is horrible, i don’t know what i am doing (wrong).

Page: goo.gl/etnoZ

Problems:
-Calendar doesn’t load the actual date, i have to press “Today” everytime.
-All calendar entrys are blinking by the first view :open_mouth:
-Maps doesn’t show the correct position if you click the entry in the list.
-The “Save” button is somewhere in nowhere (left top) and i cant move it.

#18

Hello,

Again - do you store events coordinates in your DB? Because you need to.
scheduler.config.map_resolve_event_location = true; option should be used only once to get and save event coordinates. After that it should be disabled and coordinates for new events will be saved automatically.

It loads what you’ve told him to load :slight_smile:
scheduler.init(‘scheduler_here’, new Date(2010, 8, 1), “map”);
Change it to
scheduler.init(‘scheduler_here’, new Date(), “map”);
to get current date.

Save coordinates, disable resolve option.

If their position wasn’t resolved yet - could be happening, as expected.

As you’ve added that button you can freely control it’s position. It seems you forgot to add ‘position: absolute;’ though.

Kind regards,
Ilya

#19

Hi Ilya

I appreciate your help, thank you again.

At the moment lat and lng are not stored in my XML file. I don’t know how to do that exactly. :neutral_face: Would be nice if you explain it detailed to me.

And the save button is not working… Opera debug says:

Uncaught exception: TypeError: 'save' is not a function

Nice evening

#20

UUuhhhhhH :smiley:

I think i solved all the problems :mrgreen:

Source code for all others:

pastebin.com/AQPsFtdz