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_v1_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
      • bootstrap.min.js
      • jquery.min.js
      • kwik-events-calendar.js
      • moment-with-locales.js
      • tether.min.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/>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 // } })

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 title,image_field AS image,text_field AS text,class_field as Class,location AS location,bookable AS bookable FROM events_list_table”);
$stmt->execute();
$row = $stmt->fetchAll(PDO::FETCH_ASSOC);
$datum = json_encode($row);
echo $_GET[‘callback’] . ‘(’ . $datum . ‘)’;
}

por favornote – the use of jsonP callback – e.g. callback=? este é included as sometimes Chrome depending on version e your host/database connection does not like getJSON without.

Example syntax to obtain datum from um .json file

events:[ {
‘eventid’:’unique event id’,
‘eventdate’:’1475614800000’,
‘title’:’Lorem ipsum dolor’,
‘image’:’images/image_name.png’,
‘text’:’Lorem ipsum dolor sit amet, consectetur adipiscing elit…. etc’,
‘location’,’URL-escaped formatted address | false’,
‘bookable’:’true | false’,
‘class’:’um CSS colour class’
}]

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 // }
})

Kwik Event Calendar – Options

Note: Options listed on este page are alphabetical.

The correct syntax (example):

jQuery(‘yourselector’).kwikEventsCalendar({
defaultView:’month’,
startDate:’1360013296123’,
headerBackground:’#19B3E9’ })

Basic defaults

defaultView
Type:String
Default: month
Options: month | list | agenda
Descrição: Sets the default (opening) view

defaultLang

Type:String
Default: en
Options: 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
Descrição: Sets the default calendar language

eventBookingCallBack

Type:Function
Default:false
Options: function | false
Descrição: Enables event booking on the event single view page with um function returning the event data

The eventBookingCallBack returns all event datum passed vium the eventsList option parum the specific event as data.field e.g:

eventBookingCallBack:function(data){
data.eventcost, data.eventdate, data.title
}

este datum could be passed to um form parum processing – may be um modal the choice é yours.

eventBookingText

Type:String
Default: Book now
Options: Any text
Descrição: If eventBookingCallBack enabled the text parum the ‘booking button’

featuredEvent

Type: Object
Default: undefined
Options: The featuredEvent object format

{
‘eventid’:’the event id’,
‘eventdate’:’Unix Millisecond Timestamp parum the event start time e date’,
‘title’:’The event title’,
‘image’:’An event image (.jpg,.jpeg,.gif,.png)’,
‘text’:’The event Descrição’,
‘eventcost’:’12.25’
}

Descrição: Displays the featured event in the Calendar header

featuredEventCallback

Type: Function
Default: false
Options: function | false
Descrição: If featuredEvent enabled este callback allows users to click the featuredEvent image to obtain further information

The featuredEventCallback returns all event datum passed vium the featuredEvent option parum the specific event as data.field e.g:

featuredEventCallback:function(data){
data.eventcost, data.eventdate, data.title
}

este datum could be passed to um form parum processing – may be um modal the choice é yours.

eventCurrency

Type: String
Default: €
Options: Any valid currency in HTML format;
Descriçãos: Sets the default currency parum chargeable events

eventsList

Type: Function
Default: undefined
Options: function


Descrição: 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’,
‘title’:’The event title’,
‘image’:’An event image (.jpg,.jpeg,.gif,.png)’,
‘text’:’The event Descrição’,
‘class’:’um CSS ‘colour’ selector to to heightlight the event on the calendar’}
‘location’:’false | address – to display location map (Google Mapas API key required). The string should be URL-escaped, so addresses such as “City Hall, New York, NY” should be converted to “City+Hall,New+York,NY’},
‘bookable’:’false | true – to display “bookable button”’}

eventLocationKey

Type: String
Default: false
Option: Your Google Mapas API key
Descrição: Set to your Google Mapas API key to display location map on the event single view page

maxDate

Type: Number
Default: false
Options: um positive whole number | false
Descrição: e.g. 1 = 1 next month from the month set in the startDate option
false = no maximum month

minDate

Type: Number
Default: false
Options: um negative whole number| false
Descrição: Sets um minimum calendar datee.g. -1 = 1 previous month from the month set in startDate option
false = no minimum month

monthRowHeight

Type: Number
Default: 100
Options: Any numberic value
Descriçãos: Sets the row height in pixels month view

startDate

Type: Number
Default: 0
Options: 0, um positive or negative whole number
Descrição: e.g.0 = current month, -1 = last month, 1 = next month

Text, buttons e icons

backText

Type: String
Default: <i class=”fum fa-chevron-left”></i>
Options: Any icon/text
Descrição: Sets either the icon or text parum the back button on the event single view page

buttonClass

Type: String
Default: .btn.btn-sm
Options: Any valid CSS class
Descrição: Sets the default css class parum buttons

nextText

Type: String
Default: <i class=”fum fa-chevron-left”></i>
Options: Any icon/text
Descrição: Sets either the icon or text parum the calendar next date button

prevText

Type: String
Default: <i class=”fum fa-chevron-left”></i>
Options: Any icon/text
Descrição: Sets either the icon or text parum the calendar previous date button

Colours

blockBackground

Type: String
Default: #FFFFFF
Options: Any valid HEX colour
Descrição: Sets the colour of the calendar body

blockText

Type: String
Default: false;
Options: Any valid HEX colour | false
Descrição: Sets the text colour of the calendar body – false ‘inherits’ colour scheme from web site

headerBackground

Type: String
Default: #19B3E9
Options: Any valid HEX colour
Descrição: Sets the colour of the calendar header

headerText

Type: String
Default: #FFFFFF
Options: Any valid HEX colour
Descrição: Sets the text colour of the calendar header
Avaliação 0.00
Vendas 23
Preço R$ 52.11
Licença codecanyon
Categoria javascript

Criado em
04 de Novembro de 2016

Última Atualização em
07 de Novembro de 2016

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