Adding Calendar invites in Studio

Hi
This is remarkably easy in Design, but in Studio, how can I add a calendar invite and contact details to a plane? So that when tapped all info appears and/or is stored in the person’s device? So far I have found a tutorial on Zappar website, but it’s not really telling me anything useful.

Any advice would be great - thanks!

1 Like

Hello @technology,

I think this might be usefull for you:

att, Higão.

Hi
This is my code

const display_shown = symbol.controllers.display.elements.shown;
const display_hidden = symbol.controllers.display.elements.hidden;

parent.on(“show”, () => {

// Make sure we start from fully hidden
display_hidden.reset();

// Move to the shown state
display_shown.activate();

Z.calendar.add({
title: "Roadshow" ,
start: new Date (2019, 2, 15, 9, 0, 0),
end: new Date(2019, 2, 15, 16, 0, 0),
location: "Kington",
notes: "See you there"

});

1 Like

Hi
Thanks for replying again! Not sure how this works, I have the code etc but not sure what is needed to create a button.

1 Like

Oh I understand now. Is very easy actually. You two types of obj who can be buttons in zappar:

  • Planes (images, plane and etc);

  • PhotoSphere;

Both of then can became a button by dragging from your hierarchy to your code like this:

image

And once you drop it, you can do this to create a button:

image

I always recomend pointerup for an ux thing but you can do pointerdown too. The dif btw then is:

Pointerup - You click and when you leave, the function is called;

Pointerdown - Once you click the function is called;

image

Above you can see how it have to look to became a button. Into his block you can put what you want to happen when you click on that plane, like this:

image

So here I’m telling to Zappar that when I click on that plane, it will execute a pointerdown event and execute the calendar function. Is like this you create buttons. Another pratice that you can do to be more organized is rename your button like: btnCalendar or ButtonCalender. Never let your buttons have random names like: plane, plane0, plane1, asdjadh0 and etc;

Hope you get it,

att, Higão.

Also I recomend you to explore the very cool actions thing that you can have in your planes, images and photoSphere. All you got to do is click on the plane, go on properties and click in “add” on actions, like this:

image

This actions thing can do some functionalities that you don’t need to code;

Doc: https://docs.zap.works/studio/getting-started/videos/actions/

att, Higão.

Ok thanks followed all that but when I go to publish I get an error message -

“)” expected

Why on earth?

1 Like

Again you have forgotten a “)” somewhere. If you can, send us a print or the code so I can take a look.

att, Higão.

const display_shown = symbol.controllers.display.elements.shown;
const display_hidden = symbol.controllers.display.elements.hidden;

parent.on(“show”, () => {

// Make sure we start from fully hidden
display_hidden.reset();

// Move to the shown state
display_shown.activate();

symbol.nodes.Kington_Calendar.on("pointerdown", (e) => {
	// Runs when pointerdown occurs on the Plane node
	// The argument e contains useful info about this event:
	// https://docs.zap.works/studio/scripting/reference/object/events/pointerdown/
	
Z.calendar.add({
title: "Roadshow" ,
start: new Date (2019, 2, 15, 9, 0, 0),
end: new Date(2019, 2, 15, 16, 0, 0),
location: "Kington",
notes: "See you there"

});

1 Like

No doubt it’s the same mistake as last time!

1 Like

I don’t know if is this right, but actually this is how your code looks into zappar (copy/paste):

image

And this is how it has to be to work properly:

image

I saw that the problem is: You didn’t close your {} on the button code how you can see. You let just the }) of the calender function. A thing that you can do to avoid this problem is ident your code. You can do it manually (and how you can see in the second image) or you can use this site here:

LINK: https://beautifier.io/

It will ident your code for you. With the code idented you can see if all the blocks was closed and avoid this problem.

HINT:

You don’t have to create your buttons or functions into show’s block. Is better create it outside like this:

image

This method also help you to avoid this close block problem and let your code more readble and also more functionally.

Hope you get it,

att Higão.

2 Likes

That’s it! Thanks

1 Like