Help
Thank you for purchasing our product!
The product uses lbg_evento.css & dcalendar.picker.css files
All the .js files are located in this folder. The product uses jquery. The product is generated by lbg_evento.js
We've put all the images in this 'skins' folder. If needed, you can use a different one.
For your convenience we've created for each example a .html file. In each file you'll find all the necessary code for implementation.
HTML/JS code for implementation
Step 1: Copy on your server/project the following files and folders: css, js, skins. Of course you can move the files in other folders, but you'll take care to correct the paths to the files
Step 2: Open the .html file associated with the example you want to use. For example, "extended.html"
Step 3: Put the below code in the <head> section of your file. This code has to be copied from the <head> section of the file you opened (EX: extended.html) to assure you include the example correctly.
<!-- must have -->
<link href="css/dcalendar.picker.css" rel="stylesheet" type="text/css">
<link href="css/lbg_evento.css" rel="stylesheet" type="text/css">
<script src="js/jquery-2.0.1.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.11.1.js"></script>
<script src="js/lbg_evento.js" type="text/javascript"></script>
<script src="js/dcalendar.picker.js" type="text/javascript"></script>
<script src="js/26e31fe740.js" type="text/javascript"></script>
<!-- must have -->
<script>
jQuery(function() {
setTimeout(function(){
jQuery("#lbg_evento_1").lbg_evento({
width:847,
months_area_color:"#ffffff",
centerPlugin:true,
eventsListVerticalPadding:20,
eventsListHorizontalPadding:10,
eventTitleLeftMargin:15,
eventFirstDateFontSize:92,
eventSecondDateFontSize:20,
eventSecondDateMonthFontSize:13,
eventTitleFontSize:27,
eventInitialDetailsFontSize:14,
eventBottomBorderColor:"#CCCCCC",
eventBackgroundColor_odd:"#ffffff",
eventBackgroundColor_even:"#ebebeb",
eventBgDayColor_odd:"",
eventBgDayColor_even:"",
eventDateColor_odd:"#444444",
eventDateColor_even:"#444444",
eventTitleColor_odd:"#444444",
eventTitleColor_even:"#444444",
eventInitialDetailsColor_odd:"#444444",
eventInitialDetailsColor_even:"#444444",
dressCode:"Dress code",
dressCodeFontSize:13,
dressCodeColor_odd:"#808080",
dressCodeColor_even:"#808080",
socialIconsColor_odd:"#FFFFFF",
socialIconsColor_even:"#FFFFFF",
shortmonth_arr:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
longdays_arr:["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
eventDaysBgColors_arr:["#e2007e", "#920683", "#21268e", "#2380c3", "#c13fd0", "#00d8e6", "#f49a38"],
eventDaysColor:"#ffffff",
use24HoursFormat:false,
noEventsAvailableText:"No event available for this month",
eventCancelledText:"Event Cancelled",
fullCalendarOnLeft:true,
leftSideCalendarDaysColor:"#707275",
leftSideCalendarPastMonthDaysColor:"#aaaaaa",
leftSideCalendarNextMonthDaysColor:"#aaaaaa",
leftSideCalendarCurrentDayColor:"#e2007e",
leftSideCalendarEventDaysColor:"#0000CC",
leftSideCalendarEventDaysBgColor:"#7ff3fb",
leftSideCalendarDaysNameColor:"#000000",
yearColor:"#a3a3a3",
monthColor:"#444444",
monthYearLineSeparatorColor:"#e2007e",
monthsNextPrevArrowsColor:"#d1d1d1",
detailsTitle:"Details",
whenWhereTitle:"When & Where",
organizerTitle:"Organizer",
moreDetailsText:"more details here",
moreDetailsTarget:"_blank",
showFacebookBut:true,
showTwitterBut:true,
showPinterestBut:true,
searchInputText:"search...",
bookNowText:"Book Now",
bookNowLinkTarget:"_blank",
endedText:"Ended"
});
}, 100);
});
</script>
Step 4: In the <body> section copy the code below. This code has to be copied from the <body> section of the file you opened (EX: extended.html) to assure you include the example correctly.
<div id="lbg_evento_1"><li class="xtitle">Aspernatur aut odit aut fugit</li></ul>
<li class="xstartdate">4/5/2020-18:30</li>
<li class="xenddate">4/19/2020-22:30</li>
<li class="xaddress">3607 Wayback Lane, East Hampton, NY</li>
<li class="xmainimage">http://lambertgroupproductions.com/wp-content/uploads/2020/03/evento2020-12.jpg</li>
<li class="xdetails">Mauris dictum enim at porta eleifend. Etiam vestibulum sapien quis mi ornare placerat. Suspendisse libero mi, aliquet quis ultricies eu, sodales sed enim. Mauris pretium ligula sit amet quam elementum venenatis. Suspendisse vulputate mauris et sodales euismod. Integer auctor viverra libero, vel aliquam tellus tempor nec. Sed id justo euismod, fermentum felis eget, sollicitudin augue. Praesent vel ultrices tellus. Nam pellentesque tellus et euismod hendrerit.</li>
<li class="xbooknowlink">https://1.envato.market/Rob5a</li>
<li class="xorganizer_logo">http://lambertgroupproductions.com/wp-content/uploads/2019/11/Lambert-Group-Logo.png</li>
<li class="xorganizer_info">We Create Products Of High Quality And Perspective, Striving To Be Ahead Of Our Time</li>
<li class="xmoreinfolink">http://lambertgroupproductions.com/2020/03/01/maecenas-elementum-vulputate-purus-2/</li>
<li class="xdresscode">Cocktail</li>
<li class="xcancelled">0</li>
<li class="xtitle">Maecenas elementum vulputate purus</li></ul>
<li class="xstartdate">4/10/2020-18:30</li>
<li class="xenddate">6/9/2020-22:30</li>
<li class="xaddress">3607 Wayback Lane, East Hampton, NY</li>
<li class="xmainimage">http://lambertgroupproductions.com/wp-content/uploads/2020/02/evento2020-1.jpg</li>
<li class="xdetails">Mauris dictum enim at porta eleifend. Etiam vestibulum sapien quis mi ornare placerat. Suspendisse libero mi, aliquet quis ultricies eu, sodales sed enim. Mauris pretium ligula sit amet quam elementum venenatis. Suspendisse vulputate mauris et sodales euismod. Integer auctor viverra libero, vel aliquam tellus tempor nec. Sed id justo euismod, fermentum felis eget, sollicitudin augue. Praesent vel ultrices tellus. Nam pellentesque tellus et euismod hendrerit.</li>
<li class="xbooknowlink">https://1.envato.market/Rob5a</li>
<li class="xorganizer_logo">http://lambertgroupproductions.com/wp-content/uploads/2019/11/Lambert-Group-Logo.png</li>
<li class="xorganizer_info">We Create Products Of High Quality And Perspective, Striving To Be Ahead Of Our Time</li>
<li class="xmoreinfolink">http://lambertgroupproductions.com/2020/03/02/maecenas-elementum-vulputate-purus-3/</li>
<li class="xdresscode">Cocktail</li>
<li class="xcancelled">0</li>
<li class="xtitle">Etiam pellentesque risus</li></ul>
<li class="xstartdate">4/11/2020-18:30</li>
<li class="xenddate">4/17/2020-22:30</li>
<li class="xaddress">2273 Philli Lane, Warner, OK</li>
<li class="xmainimage">http://lambertgroupproductions.com/wp-content/uploads/2020/03/evento2020-20.jpg</li>
<li class="xdetails">Mauris dictum enim at porta eleifend. Etiam vestibulum sapien quis mi ornare placerat. Suspendisse libero mi, aliquet quis ultricies eu, sodales sed enim. Mauris pretium ligula sit amet quam elementum venenatis. Suspendisse vulputate mauris et sodales euismod. Integer auctor viverra libero, vel aliquam tellus tempor nec. Sed id justo euismod, fermentum felis eget, sollicitudin augue. Praesent vel ultrices tellus. Nam pellentesque tellus et euismod hendrerit.</li>
<li class="xbooknowlink">https://1.envato.market/Rob5a</li>
<li class="xorganizer_logo">http://lambertgroupproductions.com/wp-content/uploads/2019/11/Lambert-Group-Logo.png</li>
<li class="xorganizer_info">We Create Products Of High Quality And Perspective, Striving To Be Ahead Of Our Time</li>
<li class="xmoreinfolink">http://lambertgroupproductions.com/2020/03/02/etiam-pellentesque-risus/</li>
<li class="xdresscode">Cocktail</li>
<li class="xcancelled">1</li>
<li class="xtitle">Donec congue lacus urna</li></ul>
<li class="xstartdate">4/13/2020-20:20</li>
<li class="xenddate">4/30/2020-22:0</li>
<li class="xaddress">4371 Hilltop Drive, Amarillo, TX</li>
<li class="xmainimage">http://lambertgroupproductions.com/wp-content/uploads/2020/03/evento2020-21.jpg</li>
<li class="xdetails">Mauris dictum enim at porta eleifend. Etiam vestibulum sapien quis mi ornare placerat. Suspendisse libero mi, aliquet quis ultricies eu, sodales sed enim. Mauris pretium ligula sit amet quam elementum venenatis. Suspendisse vulputate mauris et sodales euismod. Integer auctor viverra libero, vel aliquam tellus tempor nec. Sed id justo euismod, fermentum felis eget, sollicitudin augue. Praesent vel ultrices tellus. Nam pellentesque tellus et euismod hendrerit.</li>
<li class="xbooknowlink">https://1.envato.market/Rob5a</li>
<li class="xorganizer_logo">http://lambertgroupproductions.com/wp-content/uploads/2019/11/Lambert-Group-Logo.png</li>
<li class="xorganizer_info">We Create Products Of High Quality And Perspective, Striving To Be Ahead Of Our Time</li>
<li class="xmoreinfolink">http://lambertgroupproductions.com/2020/03/02/etiam-pellentesque-risus-2/</li>
<li class="xdresscode">Smart Casual</li>
<li class="xcancelled">0</li>
<li class="xtitle">Suspendisse velit ipsum</li></ul>
<li class="xstartdate">5/2/2020-23:0</li>
<li class="xenddate">5/21/2020-5:0</li>
<li class="xaddress">4606 North Street, FLEMING ISLAND, FL</li>
<li class="xmainimage">http://lambertgroupproductions.com/wp-content/uploads/2020/03/evento2020-23.jpg</li>
<li class="xdetails">Mauris dictum enim at porta eleifend. Etiam vestibulum sapien quis mi ornare placerat. Suspendisse libero mi, aliquet quis ultricies eu, sodales sed enim. Mauris pretium ligula sit amet quam elementum venenatis. Suspendisse vulputate mauris et sodales euismod. Integer auctor viverra libero, vel aliquam tellus tempor nec. Sed id justo euismod, fermentum felis eget, sollicitudin augue. Praesent vel ultrices tellus. Nam pellentesque tellus et euismod hendrerit.</li>
<li class="xbooknowlink">https://1.envato.market/Rob5a</li>
<li class="xorganizer_logo">http://lambertgroupproductions.com/wp-content/uploads/2019/11/Lambert-Group-Logo.png</li>
<li class="xorganizer_info">We Create Products Of High Quality And Perspective, Striving To Be Ahead Of Our Time</li>
<li class="xmoreinfolink">http://lambertgroupproductions.com/2020/03/02/suspendisse-velit-ipsum/</li>
<li class="xdresscode">Smart Casual</li>
<li class="xcancelled">0</li>
<li class="xtitle">Suspendisse a consequat velit</li></ul>
<li class="xstartdate">5/4/2020-22:10</li>
<li class="xenddate">5/4/2020-23:0</li>
<li class="xaddress">2873 Pheasant Ridge Road, Jenkintown, PA</li>
<li class="xmainimage">http://lambertgroupproductions.com/wp-content/uploads/2020/03/evento2020-25.jpg</li>
<li class="xdetails">Mauris dictum enim at porta eleifend. Etiam vestibulum sapien quis mi ornare placerat. Suspendisse libero mi, aliquet quis ultricies eu, sodales sed enim. Mauris pretium ligula sit amet quam elementum venenatis. Suspendisse vulputate mauris et sodales euismod. Integer auctor viverra libero, vel aliquam tellus tempor nec. Sed id justo euismod, fermentum felis eget, sollicitudin augue. Praesent vel ultrices tellus. Nam pellentesque tellus et euismod hendrerit.</li>
<li class="xbooknowlink">https://1.envato.market/Rob5a</li>
<li class="xorganizer_logo">http://lambertgroupproductions.com/wp-content/uploads/2019/11/Lambert-Group-Logo.png</li>
<li class="xorganizer_info">We Create Products Of High Quality And Perspective, Striving To Be Ahead Of Our Time</li>
<li class="xmoreinfolink">http://lambertgroupproductions.com/2020/03/01/maecenas-elementum-vulputate-purus/</li>
<li class="xdresscode">Creative Black Tie</li>
<li class="xcancelled">0</li>
<li class="xtitle">Donec blandit lobortis ligula</li></ul>
<li class="xstartdate">5/8/2020-15:15</li>
<li class="xenddate">5/21/2020-18:30</li>
<li class="xaddress">641 Mount Tabor, Yonkers, NY</li>
<li class="xmainimage">http://lambertgroupproductions.com/wp-content/uploads/2020/03/evento2020-24.jpg</li>
<li class="xdetails">Mauris dictum enim at porta eleifend. Etiam vestibulum sapien quis mi ornare placerat. Suspendisse libero mi, aliquet quis ultricies eu, sodales sed enim. Mauris pretium ligula sit amet quam elementum venenatis. Suspendisse vulputate mauris et sodales euismod. Integer auctor viverra libero, vel aliquam tellus tempor nec. Sed id justo euismod, fermentum felis eget, sollicitudin augue. Praesent vel ultrices tellus. Nam pellentesque tellus et euismod hendrerit.</li>
<li class="xbooknowlink">https://1.envato.market/Rob5a</li>
<li class="xorganizer_logo">http://lambertgroupproductions.com/wp-content/uploads/2019/11/Lambert-Group-Logo.png</li>
<li class="xorganizer_info">We Create Products Of High Quality And Perspective, Striving To Be Ahead Of Our Time</li>
<li class="xmoreinfolink">http://lambertgroupproductions.com/2020/03/03/donec-blandit-lobortis-ligula-3/</li>
<li class="xdresscode">Smart Casual</li>
<li class="xcancelled">0</li>
<li class="xtitle">Etiam sodales pretium tortor</li></ul>
<li class="xstartdate">5/17/2020-22:10</li>
<li class="xenddate">5/30/2020-23:0</li>
<li class="xaddress">1411 Karen Lane, Louisville, KY</li>
<li class="xmainimage">http://lambertgroupproductions.com/wp-content/uploads/2020/03/evento2020-26.jpg</li>
<li class="xdetails">Mauris dictum enim at porta eleifend. Etiam vestibulum sapien quis mi ornare placerat. Suspendisse libero mi, aliquet quis ultricies eu, sodales sed enim. Mauris pretium ligula sit amet quam elementum venenatis. Suspendisse vulputate mauris et sodales euismod. Integer auctor viverra libero, vel aliquam tellus tempor nec. Sed id justo euismod, fermentum felis eget, sollicitudin augue. Praesent vel ultrices tellus. Nam pellentesque tellus et euismod hendrerit.</li>
<li class="xbooknowlink">https://1.envato.market/Rob5a</li>
<li class="xorganizer_logo">http://lambertgroupproductions.com/wp-content/uploads/2019/11/Lambert-Group-Logo.png</li>
<li class="xorganizer_info">We Create Products Of High Quality And Perspective, Striving To Be Ahead Of Our Time</li>
<li class="xmoreinfolink">http://lambertgroupproductions.com/2020/03/03/donec-blandit-lobortis-ligula-2/</li>
<li class="xdresscode">Creative Black Tie</li>
<li class="xcancelled">0</li>
| Attribute | Default Value | Description |
| General settings | ||
| width | 720 | The calendar width. |
| months_area_color | '#ffffff' | The left side or top side area background color. |
| centerPlugin | true | false - the calendar will not be centered |
| searchInputText | 'search...' | You can translate "Search" text if your website uses other language than English. |
| eventsListVerticalPadding | 20 | Event vertical padding (in pixels) |
| eventsListHorizontalPadding | 10 | Event horizontal padding (in pixels) |
| eventTitleLeftMargin | 15 | The left margin of the event title (in pixels) |
| eventFirstDateFontSize | 92 | The font size of the first date of the event (in pixels) |
| eventSecondDateFontSize | 20 | The font size of the second date of the event (in pixels) |
| eventSecondDateMonthFontSize | 13 | The font size of the second date month of the event (in pixels) |
| eventTitleFontSize | 27 | The font size of the event title (in pixels) |
| eventInitialDetailsFontSize | 14 | The font size of the initial details of the event (in pixels) |
| eventBottomBorderColor | '#CCCCCC' | The event bottom border color |
| eventBackgroundColor_odd | '#ffffff' | The event background color for events that have an odd position in the events list of the month |
| eventBackgroundColor_even | '#ebebeb' | The event background color for events that have an even position in the events list of the month |
| eventBgDayColor_odd | '#da0000' | The day background color for events that have an odd position in the events list of the month |
| eventBgDayColor_even | '#000000' | The day background color for events that have an even position in the events list of the month |
| eventDateColor_odd | '#444444' | The event day color for events that have an odd position in the events list of the month |
| eventDateColor_even | '#444444' | The event day color for events that have an even position in the events list of the month |
| eventTitleColor_odd | '#444444' | The event title color for events that have an odd position in the events list of the month |
| eventTitleColor_even | '#444444' | The event title color for events that have an even position in the events list of the month |
| eventInitialDetailsColor_odd | '#444444' | The event initial details color for events that have an odd position in the events list of the month |
| eventInitialDetailsColor_even | '#444444' | The event initial details color for events that have an even position in the events list of the month |
| dressCode | 'Dress code' | You can translate "Dress Code" text if your website uses other language than English. |
| dressCodeFontSize | 13 | The font size of the event dress code (in pixels) |
| dressCodeColor_odd | '#808080' | The event dress code color for events that have an odd position in the events list of the month |
| dressCodeColor_even | '#808080' | The event dress code color for events that have an even position in the events list of the month |
| socialIconsColor_odd | '#000000' | The social icons color for events that have an odd position in the events list of the month |
| socialIconsColor_even | '#FFFFFF' | The social icons color for events that have an even position in the events list of the month |
| shortmonth_arr | ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] | You can translate months abbreviation if your website uses other language than English. |
| longdays_arr | ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] | You can translate the days of the months if your website uses other language than English. |
| eventDaysBgColors_arr | ['#fff000', '#00ffe0', '#ff780a', '#c96bb6', '#00ff36', '#ff00a8', '#008aff'] | You can define for each day a background color. |
| eventDaysColor | '#FFFFFF' | The text color for the event day of the week |
| use24HoursFormat | false | false - the calendar will not use the 24 hours format |
| noEventsAvailableText | 'No event available for this month' | You can translate "No Events Available" text if your website uses other language than English. |
| eventCancelledText | 'Cancelled' | You can translate "Cancelled" text if your website uses other language than English. |
| bookNowText | 'BOOK NOW' | You can translate "Book Now" text if your website uses other language than English. |
| bookNowLinkTarget | '_self' | Possible values: _self - - the book now link will open in the same window _blank - - the book now link will open in a new window |
| endedText | 'Ended' | You can translate "Ended" text if your website uses other language than English. |
| Left Side/Top Callendar | ||
| fullCalendarOnLeft | true | false - no left side area will appear and the next/previous buttons + the search feature will be displayed at the top |
| leftSideCalendarDaysColor | '#707275' | Left Side Calendar Days Color |
| leftSideCalendarPastMonthDaysColor | '#aaaaaa' | Left Side Calendar Past Month Days Color |
| leftSideCalendarNextMonthDaysColor | '#aaaaaa' | Left Side Calendar Next Month Days Color |
| leftSideCalendarCurrentDayColor | '#00ffe0' | Left Side Calendar Current Day Color |
| leftSideCalendarEventDaysColor | '#0000CC' | Left Side Calendar Event Days Color |
| leftSideCalendarEventDaysBgColor | '#00ffe0' | Left Side Calendar Event Days Background Color |
| leftSideCalendarDaysNameColor | '#000000' | Left Side Calendar Days Name Color |
| yearColor | '#a3a3a3' | Current year color (displayed on top or left of the plugin) |
| monthColor | '#444444' | Current month color (displayed on top or left of the plugin) |
| monthYearLineSeparatorColor | '#da0000' | Current month & year line separator color (displayed on top or left of the plugin) |
| monthsNextPrevArrowsColor | '#d1d1d1' | Months Next/Prev arrows color |
| Left Side/Top Callendar | ||
| detailsTitle | 'Details' | You can translate "Details" text if your website uses other language than English. |
| whenWhereTitle | 'When & Where' | You can translate "When Where" text if your website uses other language than English. |
| organizerTitle | 'Organizer' | You can translate "Organizer" text if your website uses other language than English. |
| moreDetailsText | 'more details here' | You can translate "More Details" text if your website uses other language than English. |
| showFacebookBut | true | Possible values: true - The FaceBook button will appear false - The FaceBook button will not appear |
| showTwitterBut | true | Possible values: true - The Twitter button will appear false - The Twitter button will not appear |
| showPinterestBut | true | Possible values: true - The Pinterest button will appear false - The Pinterest button will not appear |
Example of usage:
jQuery("#lbg_evento_1").lbg_evento({
width:847,
months_area_color:"#ffffff",
centerPlugin:true,
eventsListVerticalPadding:20,
eventsListHorizontalPadding:10,
eventTitleLeftMargin:15,
eventFirstDateFontSize:92,
eventSecondDateFontSize:20,
eventSecondDateMonthFontSize:13,
eventTitleFontSize:27,
eventInitialDetailsFontSize:14,
eventBottomBorderColor:"#CCCCCC",
eventBackgroundColor_odd:"#ffffff",
eventBackgroundColor_even:"#ebebeb",
eventBgDayColor_odd:"",
eventBgDayColor_even:"",
eventDateColor_odd:"#444444",
eventDateColor_even:"#444444",
eventTitleColor_odd:"#444444",
eventTitleColor_even:"#444444",
eventInitialDetailsColor_odd:"#444444",
eventInitialDetailsColor_even:"#444444",
dressCode:"Dress code",
dressCodeFontSize:13,
dressCodeColor_odd:"#808080",
dressCodeColor_even:"#808080",
socialIconsColor_odd:"#FFFFFF",
socialIconsColor_even:"#FFFFFF",
shortmonth_arr:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
longdays_arr:["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
eventDaysBgColors_arr:["#e2007e", "#920683", "#21268e", "#2380c3", "#c13fd0", "#00d8e6", "#f49a38"],
eventDaysColor:"#ffffff",
use24HoursFormat:false,
noEventsAvailableText:"No event available for this month",
eventCancelledText:"Event Cancelled",
fullCalendarOnLeft:true,
leftSideCalendarDaysColor:"#707275",
leftSideCalendarPastMonthDaysColor:"#aaaaaa",
leftSideCalendarNextMonthDaysColor:"#aaaaaa",
leftSideCalendarCurrentDayColor:"#e2007e",
leftSideCalendarEventDaysColor:"#0000CC",
leftSideCalendarEventDaysBgColor:"#7ff3fb",
leftSideCalendarDaysNameColor:"#000000",
yearColor:"#a3a3a3",
monthColor:"#444444",
monthYearLineSeparatorColor:"#e2007e",
monthsNextPrevArrowsColor:"#d1d1d1",
detailsTitle:"Details",
whenWhereTitle:"When & Where",
organizerTitle:"Organizer",
moreDetailsText:"more details here",
moreDetailsTarget:"_blank",
showFacebookBut:true,
showTwitterBut:true,
showPinterestBut:true,
searchInputText:"search...",
bookNowText:"Book Now",
bookNowLinkTarget:"_blank",
endedText:"Ended"
});
The events list resides inside <div class="lbg_xeventslist"> ... </div> element
Each event is defined by this code:
<ul>
<li class="xtitle">The Event Title</li></ul>
<li class="xstartdate">4/5/2020-18:30</li>
<li class="xenddate">4/19/2020-22:30</li>
<li class="xaddress">The Event Address
<li class="xmainimage">http://www.domain_name.com/some_optional_path/main_image.jpg</li>
<li class="xdetails">The event details</li>
<li class="xbooknowlink">http://www.domain_name.com/your_register_to_event_page</li>
<li class="xorganizer_logo">http://www.domain_name.com/some_optional_path/oragnizer_logo.jpg</li>
<li class="xorganizer_info">The organizer details</li>
<li class="xmoreinfolink">http://www.domain_name.com/some_optional_path/event_page.html</li>
<li class="xdresscode">The Dess Code</li>
<li class="xcancelled">0</li>
- "xstartdate" and "xenddate" should have this structure: year/month/day-hour:minute
- xcancelled can be 0 or 1. 0 for event not canceled (defaut way) and 1 for event canceled
How to load the calendar showing the current month events
Before you initialize the calendar add this code
<?php
$currentY=date("Y");
$currentM=date("n");
$currentD=date("j");
$currentH=date("H");
$currentMin=date("i");
?>
When you initialize the calendar, populate 'nowDate' parameter, like this
jQuery('#circularCountdown_v1').circularCountdown({
nowDate:'<?=$currentY?>/<?=$currentM?>/<?=$currentD?>-<?=$currentH?>:<?=$currentMin?>', //year/month/day-hour:minute});
width:847,
You can also check extended.php file