How to Add an Event Calendar to a Wix Website

hello youtube today I’d like to show you how to create a calendar and add it to X which is a popular online website pattern by its selection of calendar which it’s limited therefore we will be using pin calendar calm to make our calendar first we’re going to create an account simply enter user name and password and your email address you will receive an email what you need to do next is click on the confirmation link this will open up a new
page from which you can confirm that it was indeed you create the account a default calendar will be automatically created for you the default style is red but you can change it later and I’ll show you how to yeah let’s start by adding in the fence we kept the event a title let’s call this we have a photo we wanted to show a medium of thumbnail alright so we have our event with event details alright so next step what we’re going to do is embed
the calendar on Wix so you through two ways of doing this you can go to the main menu and click on embed calendar or you can click on this large button here now we’re going to be embedding the calendar on Wix so we need to click on the Wix tab the difference between the regular embed code and the Wix code is that the regular if you have access to a regular website this code will auto size the frame in which the calendar is shown where his own
wigs because of limitations on how the Wix handles iframes you have to manually set the height so no big deal we can do this manually as well what we’re going to do is click on copy we’re going to copy the embed code close this window going to go back to editor so you could see this as a standard page editor we’re going to select add and we’re going to go all the way down here under more select HTML iframe and it’s going to give us a widget here
we’re going to click on enter code and right click and select paste stew paste the embed code the embed code will show our calendar inside an iframe window so the only thing you may want to adjust is to avoid scroll bars you may need to play with the height here of the iframe window in which the Condors show so we’ll just leave that 1050 pixels high hoping that this is going to be high enough to fit down there so all right so let’s move this
component around so there’s two things going on the the counters going can be shown inside this this iframe so what we want to do is we want to resize this so let’s maybe let’s get rid of this this thing first don’t want this don’t want this just crossing on the beat so what we want to do is scroll down until see see at this moment the component height the widgets height is larger is taller than our calendar all right so now it fits it fits
perfectly with all scroll bars and we can go to preview and Turkana right so here’s our event and that’s how it’s going to work on their own Wix website all right okay I’d like to show you some things you might run into some issues you might run into when I’m betting the calendar so just for this example I had a background on my Wix page and I added a few extra events so what you’re gonna see is all of a sudden when you have upcoming events the
calendar is larger so one way the harder way of taking care of this issue is just to resize the calendar so we can do is we can make the widget larger and we need to make the embed code larger as well so we need to change the height to the embed code to 2050 for example it just needs to be large enough so you like comma date our events and then we need to size it so we can give her the scroll bars again if you’re okay with the scroll bars we
don’t need to do this but if you want to give her the scroll bars this is just have to size it until it third no longer shown so when we go to preview now you can see the upcoming events below and this is how our calendar is looking when you click on the event I’ll take us to the event details another way of taking care of this is to change our calendar so our upcoming events are no longer shown this is going to result in a last all calendar
so if you want to we can change unclick show upcoming events below the calendar so as you can see right now you need to go back to Wix and let’s preview and reload okay so doing that I guess four of the upcoming events from being shown below the calendar the widget always the height of the widget always has to be taller than the height of the embed code otherwise the scroll bars will be shown finally I’d like to show you a few ways you can
customize the calendar or even more so let’s go back into let’s go back into Conner select from the main menu select edit calendar what we’re going to do is change the width of the calendar so let’s make it more narrow 600 let’s make it 600 let’s pick a different style to maybe pick this style let’s hide a title and we want to show that title let’s change the colors on the page the background color it was me me encanta light blue let’s make
the title greenish and flats care of the tats and we’ll change it to arrows and let’s squish everything down so we get flat buttons and we’ll get Rev the rounding on the buttons let’s show everything square and one other thing I’d like to show you is you can go the email asking for email newsletter you can get wrote that if you choose to here and you can also add photos so we added you can add a photo for January right so let’s see how our
calendar looks like each month can have a photo we changed the background color we changed the title color we decided to go for a flatter look see here is our photo for January and our photo for every okay to update wigs let’s go back to Wix let’s enter the code since we needed to 600 let’s make the width of the iframe say 750 just get just to get give us some room and this is what our calendar is looking like right now thanks for watching check
out pain calendar calm