Calendar Widget Layout?

  • 2
  • Question
  • Updated 4 years ago
  • Answered
Is it possible to create a custom layout with the new calendar widget?
Photo of Nathan Neuschwander

Nathan Neuschwander

  • 350 Points 250 badge 2x thumb

Posted 4 years ago

  • 2
Photo of Neal

Neal

  • 61,252 Points 50k badge 2x thumb
Hi Nathan,

In order to use a different layout with the Calendar Widget, you'll need to take and host the code for the Widget and modify it so that the layout referenced in the Widget points to your custom one.

Thanks.
Photo of Nathan Neuschwander

Nathan Neuschwander

  • 350 Points 250 badge 2x thumb
Is there documentation on self-hosting the calendar widget?
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Nathan,

The source and available documentation for the google calendar widget is contained here - https://github.com/Rise-Vision/widget-google-calendar
You may use it wherever you like.

Thanks!
Photo of Eric S.

Eric S.

  • 7,412 Points 5k badge 2x thumb
There is no documentation about custom widgets and how to host your files.

What files do I need to host? The entire folder? Just the SRC folder?

Can we not host in Storage?  How do we upload to Storage without having to rebuild the entire folder structure?

Need this info pretty fast, all my displays have calendars and none of them have been working in the past 2 days.
Photo of Neal

Neal

  • 61,252 Points 50k badge 2x thumb
Your settings will appear similar to the one in this image:
Photo of Eric S.

Eric S.

  • 7,412 Points 5k badge 2x thumb
Still not working
I can add the Widget, but when I add 'Your Content' and click Configure, it locks up the browser.

Checking the console, it's trying to load a bunch of files that don't exist in the folder that I uploaded (Uploaded everything as is, minus my changes to widget.html)

Trying to load things from a 'component' folder inside SRC that doesn't exist. Downloaded again from Github and there is no component folder. 

Photo of Donna Peplinskie

Donna Peplinskie

  • 7,142 Points 5k badge 2x thumb
Hey Glencoe,

Have you followed the Local Development Environment Setup and Installation in the ReadMe file for the Calendar Widget? You'll need to execute those commands to clone the Github repo to your computer and build everything.

During the build process, a `dist` folder gets created and everything you need for deployment will be created inside there. It's the `dist` folder that you will likely want to upload and use in Production. The `src` folder is where you make your coding changes. After making your changes, you'll want to run `gulp build` again, which will regenerate the contents of the `dist` folder once more.

There are a few dependencies that you'll need to install on your local machine if you want to modify our Widget code, namely Node.js & npm and Bower. These just need to be installed one-time and then you're good to go for modifying any of the code in our repos.

I'll be adding more instructions to the ReadMe about how to install these dependencies shortly.

Thx.
Photo of Eric S.

Eric S.

  • 7,412 Points 5k badge 2x thumb
No I have not as I have no interest in developing Widgets. I simply needed to change some basic layout and CSS. I took a look at the beginning of the ReadMe and it appears to be for Developers who want to do development work, not change HTML and CSS, so I didn't go through it as that's not what I do.

Why would you force this kind of requirement? I thought the point of going to Widgets was to make it easier for web designers? Most designers DO NOT use the terminal and a large majority don't even know what a Repository is, let alone how to use GIT.

Very disappointing, especially since I had my changes ready hours ago and now must go through this additional setup just to ensure I have the correct files.
Photo of Oliver Jones

Oliver Jones

  • 692 Points 500 badge 2x thumb
Wow. This stuff is sweet, especially the widget tester. Thank you.
Photo of Eric S.

Eric S.

  • 7,412 Points 5k badge 2x thumb
What folders actually need to be uploaded? Just src and dist?
What about the files, in particular the invisible files in the main directory?

node_modules is 152mb! Really hoping I don't need to upload that. one
Photo of Neal

Neal

  • 61,252 Points 50k badge 2x thumb
Just the contents of the dist folder.  The information in the deployment section of the Readme has been updated with this as well.

Thanks.
Photo of Eric S.

Eric S.

  • 7,412 Points 5k badge 2x thumb
**EDIT**  Should I post this kind of stuff on these forums or on the Issue tracker on GIThub?  Thanks Neal, didn't refresh the page before I posted!

Appears I don't need node_modules as everything seems to be working. That said, some of the labels are not displaying correctly with the custom widget. See screenshot:

http://awesomescreenshot.com/0e93vzj425

All I have done thus far is add an additional <br> to space things out as I didn't want to put too much work into a layout if I didn't know how to make it function properly.
CORRECTION: I also removed the end time per this thread:
https://community.risevision.com/rise_vision_inc/topics/calendar-widget-disable-end-time?topic-reply...


Would this be caused by not uploading that node_modules folder?
Any other ideas?
(Edited)
Photo of Donna Peplinskie

Donna Peplinskie

  • 7,142 Points 5k badge 2x thumb
Looks like it can't find the translation files. You should have a locales/en/translation.json file inside the dist folder. You can also check the Console logs of Chrome's Dev Tools to see if it offers any clues.

Thx.
Photo of Eric S.

Eric S.

  • 7,412 Points 5k badge 2x thumb
Hey Donna,
Indeed I do, however, it appears it's looking for locales/en-US/translation.json

Tried renaming the folder then trying through an Incognito window, but still no go. Checked in the main window again and still not showing translations but no error now.

It appears that there are no entries in that file for those options either. I tried gulp build again and checked the file and still nothing in there for 'scroll'.

Though I do get this (Just in the presentation without opening any placeholders/properties)
Denying load of chrome-extension://dbpicbbcpanckagpdjflgojlknomoiah/Scripts/revjet.js.map. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension. 

I've attached the original screenshot with URL and IDs blurred out as there were a couple other errors. Not sure if they mean anything, but they are not displaying now either, just the Denying one.

(Edited)
Photo of Donna Peplinskie

Donna Peplinskie

  • 7,142 Points 5k badge 2x thumb
It looks like you're running this in the Widget Tester preview app? Is that right? If so, you may also be linking to the HTML files that exist in the src folder as opposed to the dist folder, in which case the translations will not be found since they're created as part of the build. If you were to switch to using the HTML pages from the dist folder, your translations would show, and if you were to view it in RVA, it should also work.

Let me know if the scenario you're using is different from what I've described.

Thx!
Photo of Donna Peplinskie

Donna Peplinskie

  • 7,142 Points 5k badge 2x thumb
Our Widgets have various configuration files in src/config. By default, the build is configured to use the dev.js file. When developing, you'd normally be working in the src folder, and the dist folder is what gets deployed to Production.

So, if you want to use the dist folder when developing, then you'll need to run NODE_ENV=prod gulp build to tell it to use the prod.js config file instead of dev.js. Your translations should then work.

Note that if you're going to be working directly in the dist folder, then you won't want to run the gulp build command after you make your custom changes, as the automated build will overwrite the dist folder and recreate its contents using the code in the src folder.

Regarding your other question about Storage URLs, it's my understanding that Storage only simulates folders and that the structure is actually flat. As a result, the URLs from Storage that contain "folders" are not of the format that you might expect to see. I believe someone in Support is going to get back to you with more details on that one though.

Thx.
Photo of Eric S.

Eric S.

  • 7,412 Points 5k badge 2x thumb
Donna,
I am not working directly out of the dist folder. That's where the files end up after gulp build correct? And as per your instructions above, I am pointing the Widget tester to the dist folder files.
Photo of Donna Peplinskie

Donna Peplinskie

  • 7,142 Points 5k badge 2x thumb
OK, unfortunately that thread is already dated as we've since changed how the translations work. Now, if you're making your changes directly in the src folder, then it's best to use the settings.html and widget.html files from src in the Widget Tester app. This way you won't have to run gulp build after every single change you make, but rather just once after your changes are finalized.

Thx.
Photo of Eric S.

Eric S.

  • 7,412 Points 5k badge 2x thumb
OMG! You guys need to stop changing how things work all the time. There is no reference to this change in the documentation. It's also not clear which folder you should be using for development!

I'm becoming increasingly frustrated with these changes. While I don't know XML and it took me almost a day to get my calendar layout working previously, it was rock solid and never had any issues.

You switch to HTML based layouts to 'make things easier for front-end people', yet it's become increasingly complicated and requires knowledge that most front end people don't have (Good thing I learned GIT years ago working at a startup and terminal from my IT days).

I've been building websites since 1997, taught HTML at a large post secondary institution and am a former IT Manager, yet I can't even move the position of a <span> tag without serious complications and errors everywhere.

When I did manage to get it working, it stopped working and caused even more issues.

Seriously guys, you know I've been a big supporter of RiseVision but this is getting ridiculous! It should not be this much work to make small changes to an HTML based layout.

I can't be the only one running into issues like this??
Photo of olliejones

olliejones

  • 264 Points 250 badge 2x thumb
I've had some frustrating moments too, mucking around with the Calendar widget source code. But still, Rise is cleaner than many open source projects.

The catchphrase from Bill and Ted's Excellent Adventure (1989) comes to mind.  "Be excellent to each other. Party on, dudes!:

:-)
Photo of Eric S.

Eric S.

  • 7,412 Points 5k badge 2x thumb
This is on RiseVision. I built using the Tester though. You are correct, I was linking to src not dist. All working now.

So... do I ONLY need the files in the dist folder? 
Can I just rename dist to widget-google-calendar, upload and link?
Photo of Donna Peplinskie

Donna Peplinskie

  • 7,142 Points 5k badge 2x thumb
Yes, only the files in the `dist` folder are needed. You can rename that folder if you like, but note that when you build the Widget, it's configured to automatically build to a folder called `dist`. If you want to change that, you can alter `gulpfile.js` and search and replace all references to `dist` with your preferred folder name.

Thx.
Photo of Eric S.

Eric S.

  • 7,412 Points 5k badge 2x thumb
So I came in this morning and my calendar isn't working at all anymore...

I've been using a copy of my main presentation to test the new custom Widget and everything was working yesterday when I left (I didn't have time to apply changes to main presentation).

First thing today I go into my main presentation and remove the default widget and add my custom one using 'Your Content'. I set the settings and save. 

Go to preview and there is nothing being displayed. Go back and preview my test presentation (With the custom widget) and it's still displaying content correctly...

So I remove the widget from my test presentation and add it again and sure enough it stops working...

Pop open the Console and theres a bunch of new errors that were not there yesterday when I was testing... Screenshot attached.

Any ideas as to what would have happened overnight to stop this from working?
Photo of Donna Peplinskie

Donna Peplinskie

  • 7,142 Points 5k badge 2x thumb
It looks like none of those files are accessible. If you copy and paste one of the URLs, the one to calendar.js for example, do you get the script file showing in your browser?

Thx.
Photo of Eric S.

Eric S.

  • 7,412 Points 5k badge 2x thumb
None of them are accessible because /components isn't a folder in dist... I didn't delete anything off the server yesterday/today either...

Checked my local dist folder and it does not exist there either... 

Just did another gulp build and still no folder called components. 

How was it working yesterday (And when I came in before I deleted the widget I added yesterday and re-added it)??

**EDIT**
Can see in that previous screenshot that these errors were not present yesterday... I'm so confused!
(Edited)
Photo of Donna Peplinskie

Donna Peplinskie

  • 7,142 Points 5k badge 2x thumb
Actually, you don't need a components folder at all, which leads me to believe that the right widget.html page isn't being linked to. Those dependencies are only needed by the widget.html page that exists in the src folder. When you run a build, all those files get concatenated and minified and put into just one file - widget.min.js. So try checking that the URLs you have configured in the Rise Vision platform are correct.

Thx.
Photo of Eric S.

Eric S.

  • 7,412 Points 5k badge 2x thumb
I did not change the links since yesterday, but they are correctly pointing to the dist folder for widget.html and settings.html.

Tried re-saving the Widget, and even switching the URL to https (so there was an actual change) before saving. Still no go.
Photo of Donna Peplinskie

Donna Peplinskie

  • 7,142 Points 5k badge 2x thumb
Then perhaps there's a problem with the build or the files that were copied to the server.

When you build it the version of widget.html that gets created in the dist folder has no references to files in a components folder, just a reference to widget.min.js and some other third party libraries that it needs. You can verify this by opening dist/widget.html on your local machine after you run gulp build. If you see any references to files in a component folder, then I would expect that you likely would have seen some errors in Terminal when the build was run.

If the build completed successfully, you should see no references to files in a components folder, but instead see a reference to widget.min.js, in the dist/widget.html file.

Thx.
Photo of Eric S.

Eric S.

  • 7,412 Points 5k badge 2x thumb
Again, everything was working OK yesterday around 2:30, nothing has changed since then.

I've taken a look at the local files and the ones on my FTP and neither have references to a components folder, nor any dist folder, they are all relative paths

 <link rel="stylesheet" href="css/widget.min.css"/>
 <script src="js/webcomponents.min.js"></script>

I have tested my local files with the RV tester, pointing at both src and dist folder for the files and both work fine (Though pointing to src causes the translation file not to be loaded again)

I uploaded the files again and it seems to be displaying again. Though, due to the previous issue, I'm not going to switch the live screens to the new widget until Monday so I can see if it happens again.
Photo of Eric S.

Eric S.

  • 7,412 Points 5k badge 2x thumb
Everything seems to be working today. Updated our live displays and will keep an eye on it.