DESCONTO DE 20% PARA PAGAMENTO POR DEPOSITO!
Inicio » codecanyon » javascript » Kwik Event Calendar

Kwik Event Calendar Original


Kwik Event Calendar
ESCOLHA UMA DAS FORMAS DE PAGAMENTO ABAIXO



Kwik Event Calendar

é an flexible e facil to integrate jQuery plugin to display events on your website in calendar that syncs events from either um .json file or your database.
  • Responsive layout
  • 3 views available either ‘on site’ or as ‘full screen’
    1. Month
    2. Agenda
    3. List (month compact)
  • Promote featured event/s
  • Enable event booking screen
  • Display event location – Google Mapas API key required
  • Customisable colours
  • Calendar available in 107 languages
  • Free Suporte
  • Ongoing Free Atualizações parum registered users (free registration) upon release
  • Twitter Bootstrap (3+) compatible

Kwik Event Calendar – Suporte

We offer our customers ongoing ‘lifetime’ full product Suporte vium our ticketing help desk.

Our aim é to reply to all tickets within 1 working day.

Customers can use the submit the Suporte form on our website or simply email: kwikbitz@estreamdesk.com

Kwik Event Calendar – Integration

Kwik Event Calendar é based around Twitter Bootstrap the popular HTML, CSS, e JS framework. It may be silly to point out but Kwik Event Calendar é um jQuery plugin so jQuery é um requirement :)

OK so how do you get started?

After downloading Kwik Event Calendar (here) upload the files to your host servidor. Logically stylesheet CSS files go into your css folder, e the javascript files into your js folder. The Kwik Event Calendar download é structured like this:

  • kwik_event_calendar_v2_0_0
    • CSS
      • bootstrap.min.css
      • font-awesome.min.css
      • kwik-events-calendar-style.css
    • Fonts
      • FontAwesome.otf
      • fontawesome-webfont.eot
      • fontawesome-webfont.svg
      • fontawesome-webfont.ttf
      • fontawesome-webfont.woff
      • fontawesome-webfont.woff2
    • JS
      • jquery.min.js
      • bootstrap.min.js
      • imagesloaded.pkgd.min.js
      • isotope.pkgd.min.js
      • kwik-events-calendar.js
      • moment-with-locales.js
    • example.html

Copy-paste the stylesheet <link>’s into the <head> of your web page. Make sure they are in the following order:

  • <link rel=”stylesheet” type=”text/css” href=”path_to/css/bootstrap.min.css”>
  • <link rel=”stylesheet” type=”text/css” href=”path_to/css/font-awesome.min.css”>
  • <link rel=”stylesheet” type=”text/css” href=”path_to/css/any other style sheets you currently use”>
  • <link rel=”stylesheet” type=”text/css” href=”path_to/css/kwik-events-calendar-style.css”>

Adicionar the JavaScript pages near the end of your pages, right before the closing </body> tag. Make sure they are in the following order:

  • <script type=”text/javascript” src=”path_to/js/jquery.min.js”></script>
  • <script type=”text/javascript” src=”path_to/js/tether.min.js”></script>
  • <script type=”text/javascript” src=”path_to/js/bootstrap.min.js”></script>
  • <script type=”text/javascript” src=”path_to/js/imagesloaded.pkgd.min.js”></script>
  • <script type=”text/javascript” src=”path_to/js/isotope.pkgd.min.js”></script>
  • <script type=”text/javascript” src=”path_to/js/>moment-with-locales.js”></script>
  • <script type=”text/javascript” src=”path_to/js/any other JavaScript pages/jQuery plugins you currently use”></script>
  • <script type=”text/javascript” src=”path_to/js/kwik-events-calendar.js”></script>
  • <script type=”text/javascript” src=”path_to/js/your site javascript page.js”></script>

e that’s it all you need to do now é create an HTML element on your page to display your Kwik Event Calendar – example:

<div id="my_kwik_event_calendar_HTML_element"></div> You Adicionar the Kwik Event Calendar plugin to the appropriate HTML element just by adding este code: jQuery('#my_kwik_event_calendar_HTML_element').kwikEventsCalendar(); Alter the behaviour e appearance of your Kwik Event Calendar just by adding options to the code: jQuery('#my_kwik_event_calendar_HTML_element').kwikEventsCalendar({options}) Easilly syncronise events to Kwik Event Calendar from either um .json file or the database of your choice vium Ajax by using the events option: jQuery('#my_kwik_event_calendar_HTML_element').kwikEventsCalendar({ eventsList:{ // an array of events // } }) You can also make your Kwik Event Calendar interactive by adding actions to Kwik Event Calendar vium Callbacks: jQuery('#my_kwik_event_calendar_HTML_element').kwikEventsCalendar({ callback:function(){ // action in here // } })

Options

Note: Options listed on este page are alphabetical. The correct syntax (example): jQuery('yourselector').kwikEventsCalendar({ defaultView:'month', startDate:'1360013296123', headerBackground:'#19B3E9' }) <thead> </thead> <tbody> </tbody>
Option Type Default Options available Descrição
defaultView String month month | agenda Sets the default (opening) view
defaultLang String en Afrikaans, Albanian, Arabic, Arabic (Lybia), Arabic (Morocco), Arabic (Saudi Arabia), Arabic (Tunisia), Armenian, Azerbaijani, Basque, Belarusian, Bengali, Bosnian, Breton, Bulgarian, Burmese, Cambodian, Catalan, Central Atlas Tamazight, Central Atlas Tamazight Latin, Chinese (China), Chinese (Hong Kong), Chinese (Taiwan), Chuvash, Croatian, Czech, Danish, Dutch, English (Australia), English (Canada), English (Ireland), English (New Zealand), English (United Kingdom), English (United States), Esperanto, Estonian, Faroese, Finnish, French, French (Canada), French (Switzerland), Frisian, Galician, Georgian, German, German (Austria), Greek, Hebrew, Hindi, Hungarian, Icelandic, Indonesian, Italian, Japanese, Javanese, Kazakh, Klingon, Korean, Kyrgyz, Lao, Latvian, Lithuanian, Luxembourgish, Macedonian, Malay, Malay, Malayalam, Maldivian, Maori, Marathi, Montenegrin, Nepalese, Northern Sami, Norwegian Bokm?l, Nynorsk, Persian, Polish, Portuguese, Portuguese (Brazil), Pseudo, Punjabi (India), Romanian, Russian, Scottish Gaelic, Serbian, Serbian Cyrillic, Sinhalese, Slovak, Slovenian, Spanish, Spanish (Dominican Republic), Swahili, Swedish, Tagalog (Philippines), Talossan, Tamil, Telugu, Thai, Tibetan, Turkish, Ukrainian, Uzbek, Vietnamese, Welsh & siSwati
eventCategories Object False Creates um list of event categorias e associated colours – used parum filtering the calendar Example eventcategorias object {'dance':'#9C27B0','wedding':'#03A9F4','music':'#8BC34A','business':'#FF5722'}
eventCurrency String Sets the default currency parum chargeable events
eventsList Object undefined Passes um valid events list to the calendar. Valid field dates as on object parum the eventsList: eventID – the event id
eventDate – Unix Millisecond Timestamp parum the event start time e date
eventTitle – The event title
eventImage – An event image (.jpg,.jpeg,.gif,.png)
eventDescrição – Event details -The event Descrição
eventCategory – false | The event category (taken from the eventcategorias option)
eventLocation – false | address – 6 Marylebone Rd, Marylebone, London NW1, UK
eventLatLng – false | um formatted object – {‘lat’:’51.52290101280822’,’lng’:’-0.1549250146117629’}
eventBookingDetails – false | ‘Event booking details – How to book the event
eventBookingURL – false | url – ‘the specific URL parum booking/further details
eventCost – false | float – ‘the cost/ticket price of the event An example eventsList object eventsList:[{"eventID":"1","eventDate":"1475614800000","eventTitle":"Pellentesque habitant morbi","eventImage":"img/10.jpeg","eventDescrição":"Event details - Lorem ipsum dolor sit amet, consectetur adipiscing elit.","eventCategory":"dance","eventLocation":"Hogarth Court, N End, London NW3 7HJ, UK","eventLatLng":{'lat':'51.56749820396941','lng':'-0.18264832698969258'},"eventBookingDetails":"Booking details - Fusce eget varius orci. Dué interdum ac velit sed interdum.nisi, vel pharetrum odio mauré eu erat.","eventBookingURL":"http://bookingURL.com","eventCost":"20.50"}, {"eventID":"2","eventDate":"1475960400000","eventTitle":"Pellentesque habitant morbi","eventImage":"img/9.jpeg","eventDescrição":"Event details - Lorem ipsum dolor sit amet, consectetur adipiscing elit.","eventCategory":"dance","eventLocation":"Hogarth Court, N End, London NW3 7HJ, UK","eventLatLng":{'lat':'51.56749820396941','lng':'-0.18264832698969258'},"eventBookingDetails":"Booking details - Fusce eget varius orci. Dué interdum ac velit sed interdum.nisi, vel pharetrum odio mauré eu erat.","eventBookingURL":"http://bookingURL.com","eventCost":"12.50"},
eventLocationKey String false false | Your Google Mapas API key Your Google Mapas API key to display location map on the event single view page
featuredBackground String #F1F1F1 Any valid HEX colour Sets the background colour of the featured event
featuredEventID Integer false false | um valid ‘eventID’ from the eventsList option Sets the default featured event.
featuredPosition String pos-left pos-left | pos-right | pos-top Sets the featured event position – left, right top
featuredWidth Integer 30 Sets the featured event width as um % of the calendar width
maxDate Number false um positive whole number | false Sets um maximum calendar datee.g. 1 = 1 next month from the month set in the startDate option
false = no maximum month
minDate Number false um negative whole number| false Sets um minimum calendar datee.g. -1 = 1 previous month from the month set in startDate option
false = no minimum month
startDate Number 0 0, um positive or negative whole number Sets the calendar start monthe.g.0 = current month, -1 = last month, 1 = next month

Integration examples

Example syntax to obtain datum from um php page query jQuery.getJSON("http://your url/script_page_name.php?callback=?",function(data){ var events = data }) Example php page query (using PDO & assuming the eventdate field é um ‘standard’ Unix Timestamp ) if(isset($_GET['callback'] )){ $stmt = $dbh->prepare("SELECT id_field AS eventID, as UNIX_TIMESTAMP_MS(eventdate_field) AS eventDate,title_field AS eventTitle,image_field AS eventImage,Descrição_field AS eventDescrição, category_field AS eventCategory location_field AS eventLocation, latlng_field AS eventLatLng, bookingdetails_field AS eventBookingDetails, booking_url_field AS eventBookingURL, cost_field AS eventCost, FROM events_list_table"); $stmt->execute(); $row = $stmt->fetchAll(PDO::FETCH_ASSOC); $datum = json_encode($row); echo $_GET['callback'] . '(' . $datum . ')'; } Example syntax to obtain datum from um .json file eventsList:[{"eventID":"1","eventDate":"1475614800000","eventTitle":"Pellentesque habitant morbi","eventImage":"img/10.jpeg","eventDescrição":"Event details - Lorem ipsum dolor sit amet, consectetur adipiscing elit.","eventCategory":"dance","eventLocation":"Hogarth Court, N End, London NW3 7HJ, UK","eventLatLng":{'lat':'51.56749820396941','lng':'-0.18264832698969258'},"eventBookingDetails":"Booking details - Fusce eget varius orci. Dué interdum ac velit sed interdum.nisi, vel pharetrum odio mauré eu erat.","eventBookingURL":"http://bookingURL.com","eventCost":"20.50"}, {"eventID":"2","eventDate":"1475960400000","eventTitle":"Pellentesque habitant morbi","eventImage":"img/9.jpeg","eventDescrição":"Event details - Lorem ipsum dolor sit amet, consectetur adipiscing elit.","eventCategory":"dance","eventLocation":"Hogarth Court, N End, London NW3 7HJ, UK","eventLatLng":{'lat':'51.56749820396941','lng':'-0.18264832698969258'},"eventBookingDetails":"Booking details - Fusce eget varius orci. Dué interdum ac velit sed interdum.nisi, vel pharetrum odio mauré eu erat.","eventBookingURL":"http://bookingURL.com","eventCost":"12.50"},

Option example

jQuery(’.kwik-calendar-holder’).kwikEventsCalendar({
   defaultView:’month’,
   defaultLang:’en’,
   featuredBackground:’#FF5722’,
   featuredEventID:’48’,
   featuredPosition:’pos-left’,
   featuredWidth:’30’,
   eventsLocationKey:’Your Google Mapas API key’,
   eventCategories:{‘dance’:’#9C27B0’,’wedding’:’#03A9F4’,’music’:’#8BC34A’,’business’:’#FF5722’},
   eventsList:[{eventID habitant morbi”,eventImage details – Lorem ipsum dolor sit amet, consectetur adipiscing elit.”,eventCategory Court, N End, London NW3 7HJ, UK”,eventLatLng details – Fusce eget varius orci. Dué interdum ac velit sed interdum.nisi, vel pharetrum odio mauré eu erat.”,eventBookingURL“},
   {eventID habitant morbi”,eventImage details – Lorem ipsum dolor sit amet, consectetur adipiscing elit.”,eventCategory Court, N End, London NW3 7HJ, UK”,eventLatLng details – Fusce eget varius orci. Dué interdum ac velit sed interdum.nisi, vel pharetrum odio mauré eu erat.”,eventBookingURL“},
   // e MORE EVENTS //
   {eventID habitant morbi”,eventImage details – Lorem ipsum dolor sit amet, consectetur adipiscing elit.”,eventCategory Court, N End, London NW3 7HJ, UK”,eventLatLng details – Fusce eget varius orci. Dué interdum ac velit sed interdum.nisi, vel pharetrum odio mauré eu erat.”,eventBookingURL“}]
   maxDate:’6’,
   minDate:’-2’,
   startDate:’0’
})
Avaliação 0.00
Vendas 27
Preço R$ 85.64
Licença codecanyon
Categoria javascript

Criado em
04 de Novembro de 2016

Última Atualização em
16 de Março de 2017

Compra Direto por ID
Pesquisa
Central de Clientes

Novo Painel Hospetec



Ou Registre-se

Acesso ao antigo Painel

  • WooCommerce TAG
  • Prestashop TAG
  • Mais Ecommerce TAG
  • Script PHP Populares Pesquisa
  • Wordpress Populares Pesquisa
  • Rede Social Categoria
  • Igrejas TAG
  • Promoções 37
  •  

    Autores

     

    Destaque