Sunday, January 1, 2017

Kwik Event Calendar


Kwik Event Calendar

Is an flexible and straightforward to integrate jQuery plugin to display events on your web site in calendar that syncs occasions from either a .json record or your database.
  • Responsive structure
  • 3 views available either ‘on web page’ or as ‘complete monitor’
    1. Month
    2. Agenda
    3. Checklist (month compact)
  • Advertise featured experience/s
  • Enable adventure booking display
  • Show event location – Google Maps API key required
  • Customisable colors
  • Calendar to be had in 107 languages
  • Unfastened reinforce
  • Ongoing Unfastened updates for registered users (loose registration) upon free up
  • Twitter Bootstrap (3+) suitable

Kwik Experience Calendar – Beef Up

We Offer our shoppers ongoing ‘lifetime’ complete product toughen by the use of our ticketing assist table.

Our aim is to respond to all tickets inside of 1 operating day.

Customers can use the submit the support form on our website or simply electronic mail: kwikbitz@estreamdesk.com

Kwik Experience Calendar – Integration

Kwik Experience Calendar is predicated around Twitter Bootstrap the popular HTML, CSS, and JS framework. IT MAY be silly to indicate out but Kwik Adventure Calendar is a jQuery plugin so jQuery is a requirement :)

ADEQUATE so how do you get started?

After downloading Kwik Experience Calendar (here) add the files to your host server. Logically stylesheet CSS files pass into your css folder, and the javascript recordsdata into your js folder. The Kwik Experience Calendar obtain is dependent like this:

  • kwik_event_calendar_v1_0_0
    • CSS
      • bootstrap.min.css
      • font-awesome.min.css
      • kwik-occasions-calendar-taste.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-occasions-calendar.js
      • second-with-locales.js
      • tether.min.js
    • instance.html

Copy-paste the stylesheet <hyperlink>’s into the <head> of your website. be certain they're within the following order:

  • <hyperlink rel=”stylesheet” kind=”text/css” href=”path_to/css/bootstrap.min.css”>
  • <link rel=”stylesheet” type=”text/css” href=”path_to/css/font-awesome.min.css”>
  • <hyperlink rel=”stylesheet” sort=”textual content/css” href=”path_to/css/some other style sheets you now use”>
  • <link rel=”stylesheet” kind=”text/css” href=”path_to/css/kwik-events-calendar-taste.css”>

Upload the JavaScript pages close to the tip of your pages, proper prior to the final </frame> tag. make sure that they are in the following order:

  • <script kind=”textual content/javascript” src=”path_to/js/jquery.min.js”></script>
  • <script kind=”text/javascript” src=”path_to/js/tether.min.js”></script>
  • <script type=”textual content/javascript” src=”path_to/js/bootstrap.min.js”></script>
  • <script type=”text/javascript” src=”path_to/js/>moment-with-locales.js”></script>
  • <script sort=”text/javascript” src=”path_to/js/some other JavaScript pages/jQuery plugins you now use”></script>
  • <script sort=”text/javascript” src=”path_to/js/kwik-events-calendar.js”></script>
  • <script kind=”text/javascript” src=”path_to/js/your site javascript web page.js”></script>

And that’s it all you need to do now is create an HTML element on your web page to display your Kwik Experience Calendar – instance:

<div id=”my_kwik_event_calendar_HTML_element”></div>

You upload the Kwik Event Calendar plugin to the appropriate HTML component just by adding this code:

jQuery(’#my_kwik_event_calendar_HTML_element’).kwikEventsCalendar();

Modify the behaviour and appearance of your Kwik Experience Calendar simply by adding options to the code:

jQuery(’#my_kwik_event_calendar_HTML_element’).kwikEventsCalendar(options)
Easilly syncronise events to Kwik Adventure Calendar from both a .json report or the database of your choice by means of Ajax by utilizing the events option:
jQuery(’#my_kwik_event_calendar_HTML_element’).kwikEventsCalendar( eventsList:)

Example syntax to acquire information from a php page question

jQuery.getJSON(“http://your url/script_page_name.php?callback=?”,serve as(knowledge)
var )

Example php page query (using PDO & assuming the eventdate field is a ‘usual’ Unix Timestamp )

if(isset($_GET‘callback’ ))prepare(“MAKE A CHOICE id_field AS eventid, as UNIX_TIMESTAMP_MS(eventdate_field) AS eventdate,title_field AS identify,image_field AS symbol,text_field AS text,class_field as Magnificence,region AS area,bookable AS bookable FROM events_list_table”);
$stmt->execute();
$row = $stmt->fetchAll(PDO::FETCH_ASSOC);
$knowledge = json_encode($row);
echo $_GET‘callback’ . ‘(’ . $information . ‘)’;
}

Please notice – the use of jsonP callback – e.g. callback=? that is incorporated as from time to time Chrome depending on version and your host/database connection does not like getJSON with out.

Instance syntax to acquire knowledge from a .json file

events:
‘eventid’:’
})

Kwik Experience Calendar – Options

Be Aware: Choices listed on this web page are alphabetical.

the proper syntax (instance):

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

Fundamental defaults

defaultView
Sort:String
Default: month
Choices: month | list | agenda
Description: Sets the default (commencing) view

defaultLang

Kind: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, Significant Atlas Tamazight, Vital Atlas Tamazight Latin, Chinese Language (China), Chinese (Hong Kong), Chinese Language (Taiwan), Chuvash, Croatian, Czech, Danish, Dutch, English (Australia), English (Canada), English (Ireland), English (New Zealand), English (United Kingdom), English (Usa), Esperanto, Estonian, Faroese, Finnish, French, French (Canada), French (Switzerland), Frisian, Galician, Georgian, German, German (Austria), Greek, Hebrew, Hindi, Hungarian, Icelandic, Indonesian, Italian, Eastern, 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
Description: Units the default calendar language

eventBookingCallBack

Type:Serve As
Default:false
Choices: function | fake
Description: Allows adventure reserving at the experience unmarried view web page with a function returning the event data

The eventBookingCallBack returns all experience data handed by the use of the eventsList option for the particular event as data.field e.g:

eventBookingCallBack:serve as(knowledge)information.eventcost, knowledge.eventdate, knowledge.name
}

this knowledge might be handed to a form for processing – may be a modal the selection is yours.

eventBookingText

Sort:String
Default: E-Book now
Options: Any textual content
Description: If eventBookingCallBack enabled the textual content for the ‘reserving button’

featuredEvent

Sort: Object
Default: undefined
Options: The featuredEvent item structure
the event id’,
‘eventdate’:’Unix Millisecond Timestamp for the event get started time and date’,
‘identify’:’the event title’,
‘symbol’:’An adventure symbol (.jpg,.jpeg,.gif,.png)’,
‘textual content’:’the event description’,
‘eventcost’:’12.25’
}

Description: Shows the featured adventure in the Calendar header

featuredEventCallback

Kind: Serve As
Default: fake
Choices: function | fake
Description: If featuredEvent enabled this callback permits users to click on the featuredEvent image to procure further information

The featuredEventCallback returns all adventure data handed by way of the featuredEvent possibility for the particular adventure as data.field e.g:

featuredEventCallback:serve as(knowledge)data.eventcost, information.eventdate, information.name
}

this data may well be handed to a kind for processing – could also be a modal the selection is yours.

eventCurrency

Type: String
Default: €
Choices: Any valid forex in HTML format;
Descriptions: Units the default forex for chargeable events

eventsList

Sort: Function
Default: undefined
Choices: function


Description: Passes a sound events record to the calendar.

Legitimate field dates as on object for the eventsList:

the event identity’,
‘eventdate’:’Unix Millisecond Timestamp for the development get started time and date’,
‘identify’:’the development title’,
‘symbol’:’An adventure symbol (.jpg,.jpeg,.gif,.png)’,
‘text’:’the event description’,
‘class’:’A CSS ‘colour’ selector to to heightlight the event on the calendar’}
‘area’:’fake | cope with – to display location map (Google Maps API key required). The string must be URL-escaped, so addresses such as “Town Corridor, The Big Apple, BIG APPLE” have to be transformed to “Town+Hall,New+York,NEW YORK’},
‘bookable’:’fake | precise – to show “bookable button”’}

eventLocationKey

Sort: String
Default: fake
Possibility: Your Google Maps API key
Description: Set in your Google Maps API key to display area map on the experience single view web page

maxDate

Kind: Quantity
Default: false
Choices: a good complete number | false
Description: e.g. 1 = 1 next month from the month set in the startDate choice
false = no most month

minDate

Type: Number
Default: fake
Choices: a bad complete number| fake
Description: Sets a minimum calendar datee.g. -1 = 1 previous month from the month set in startDate choice
false = no minimum month

monthRowHeight

Type: Quantity
Default: ONE HUNDRED
Options: Any numberic price
Descriptions: Sets the row peak in pixels month view

startDate

Kind: Number
Default: 0
Choices: ZERO, a positive or poor whole quantity
Description: e.g.0 = current month, -1 = last month, 1 = next month

Textual Content, buttons and icons

backText

Sort: String
Default: <i class=”fa fa-chevron-left”></i>
Options: Any icon/textual content
Description: Sets both the icon or textual content for the back button at the adventure single view web page

buttonClass

Sort: String
Default: .btn.btn-sm
Options: Any legitimate CSS class
Description: Sets the default css magnificence for buttons

nextText

Sort: String
Default: <i magnificence=”fa fa-chevron-left”></i>
Options: Any icon/textual content
Description: Sets both the icon or text for the calendar next date button

prevText

Kind: String
Default: <i class=”fa fa-chevron-left”></i>
Choices: Any icon/text
Description: Units both the icon or text for the calendar previous date button

Colours

blockBackground

Sort: String
Default: #FFFFFF
Choices: Any legitimate HEX colour
Description: Sets the color of the calendar frame

blockText

Sort: String
Default: fake;
Options: Any valid HEX color | false
Description: Units the textual content color of the calendar frame – false ‘inherits’ colour scheme from web site

headerBackground

Type: String
Default: #19B3E9
Options: Any legitimate HEX color
Description: Units the colour of the calendar header

headerText

Sort: String
Default: #FFFFFF
Options: Any valid HEX color
Description: Sets the text colour of the calendar header

FULL DOWNLOAD
By at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Trik tersembunyi Bermain Slither.io agar menjadi no 1 | cara tau ampuh

Slither.io Unblocked Play Engaging in online game playing avails a chance for one to have a great experience. This opens up an enormous amo...