NEX-Forms - Documentation

• Created: 29/08/2014
• latest Update: 29/08/2014
• By: Basix
• Email: support@basixonline.net

Thank you for choosing NEX-Forms - Drag and Drop Wordpress Events Calendar

VIA WordPress

1. After your download log into your WordPress admin interface
2. After login click on Plugins from the left  hand menu
3. Click on “Add new”
4. Click on “Upload”
5. Browse to the directory you downloaded the plugin to and click “Install Now”
6. After Wordpress has finished unpacking the file click on “Activate Plugin”
7. After the plugin has been activated you will notice a new menu item on the left hand navigation labelled NEX-Forms
    

VIA FTP

1. After your download unzip nex-forms from your download .zip
2. Open your FTP client
3. Browse to /your_wp_instalation/wp-content/plugins/ server
4. Uplaod nex-forms into this directory
5. Go to your wordpress admin panel
6. Go to plugins and activate NEX-Forms
7. After the plugin has been activated you will notice a new menu item on the left hand navigation labelled NEX-Forms
    

1. Enter a title.
2. Enter a description. The description is for admin use.
3. Click on Create

VIA the Calendar Manager

1. Open your calendar manager
2. Click on the second last icon next to the calendar
3. Read the instructions provided. And copy the code to be pated in the desired location

VIA Worpress TinyMCE

1. Add/edit a page or post
2. Make sure you are in "Visual" view and not "HTML" view.
3. Click on the blue NEX-Forms icon found on the editor
4. A popup will appear. Select the calendar to be inserted into the page/post
5. Click inset into post and the shortcode will be generated.

1. Open your calendar manager
2. Click on the third icon
3. Edit the calendar name and desciption
4. Click Save.

Add new event

1. Drag a single event or an icon to the desired date on the calendar. Please note...You need to save the event before changing month or year otherwise the event will be lost!
2. Change the settings
   Event Info
   • Title - Sets the Event title
   • Description - Sets the Event description show in the modal box when clciking on the event
   • Popover Teaser Text - This will trigger a bootstrap popover when hovering over the event. This is just to give a very short summary of what the event is about.
   Google Map
   • Vanue - Sets the venue name
   • Google Map - Add the address of the event location to add a google map
   Styling
   • Event Icon - Sets a small icon in front of the event title and changes the icon is the case of icon events.
   • Event Color - Choose the bootstrap colors or select custom colors for text, background and text
   • Size - Set the size of the event as displayed in the calendar (x-small, small, normal, large)
3. Click Save Event! (dont forget this)

Setting the event time

1. After adding an event to a date click on the day number to opend the daily diplay.
2. Times are set in 5min increments and the event can be dragged into any time slot. Note! The emty minute slots will not be visible on the front end, only the time slots containing an event and hour slots will be shown.
3. Click Save Event!

Editing an event

1. Hover over the event and click on the blue icon with the pencil. Please note to change the event to be on a different month or year, drop the event in the Clipboard and browes to the desired date and drag the event into the desired date.
2. Change the settings
3. Click Save Event!

Deleting an event

1. Hover over the event and click on the red icon with the X.
2. Click on delete permanantly when the confirmation box pops up or click cancel if you acidentaly clicked the delete bottom
3. Click Save Event!

Below is the default CSS used for the layout of forms (File location: nex-forms/css/ui.css)

#nex-forms .day_container{overflow:hidden;}
#nex-forms .event_holder {margin: 3px 0;width: 100%;min-height:40px;display:none;}
#nex-forms .day_time {float: left;margin-left: -22px;margin-top: -19px;position: relative;z-index: 1000000;}
#nex-forms .day_container {padding-top: 28px !important;}
#nex-forms .time_holder .event_time {color: #ccc;float: left;font-size: 11px;margin-left: 2px;position: absolute;}
#nex-forms .time_holder {border-bottom: 1px solid #f2f2f2;display: none;min-height: 30px;position: relative;}
#nex-forms .time_holder.show_time, 
#nex-forms .time_holder.show_time .event_holder,#nex-forms .day_container.show_times .time_holder {display: block !important;}
#nex-forms .fc-row.gt-flipin {transform: scale(1); transition: all 0.4s ease-in-out;}
#nex-forms .day_view .form_field {width: 100%;}
#nex-forms .show_more .fa {background: none repeat scroll 0 0 #f5f5f5;color: #999;font-size: 10px;padding: 1px 10px 5px;}
#nex-forms .show_more {bottom: 0px;position: absolute;text-align: center;width: 100%;z-index: 10000;cursor:pointer;opacity:0.8;}
#nex-forms h3.custom-month-year {clear: none;font-size: 1.3em;margin: 0 !important;}
#nex-forms #event-icon{font-size:18px;}
#nex-forms .show_more:hover{opacity:1;}
#nex-forms .show_more.open_row{display:block !important;}
#nex-forms .event_teaser.pop-in-popover-1{display:block !important;}
.event_teaser.pop-in-popover-2{display:block !important;transition: all 0.1s ease-in-out;}
.event_teaser{ display:none;font-size:12px;min-width:100px;}
#nex-forms .fc-row {transform: scale(0); }
#nex-forms .daily_events_holder {height: 100%;}
#nex-forms .cal_view {float: left;}
#nex-forms .title_text {display: inline-block;overflow-x: hidden;width: 60%;line-height: 100%;}
#nex-forms .fc-row .form_object.gt-pop{transform: scale(1.1);transition: all 0.2s ease-in-out}
#nex-forms .fc-row .form_object.gt-show {transform: scale(1);transition: all 0.3s ease-in-out;}
#nex-forms .venue_map {min-width: 100%;min-height: 300px;}
#nex-forms h3.popover-title{padding:3px 6px !important;}
#nex-forms .popover-content{padding:6px 6px !important;}
#nex-forms .fc-row .form_object {transform: scale(0);}
#nex-forms .fc-row .event_title{margin-bottom: 4px;  text-align: left;width: 100%;overflow:hidden;}
#nex-forms .day_view .event_title{margin-bottom: 4px !important;margin-left: 5%;overflow: hidden;text-align: left;width: 94%;}
#nex-forms .icon-event .event_title, .day_view .icon_event .event_title {background: none repeat scroll 0 0 transparent !important;text-align: center !important; padding: 0 !important; cursor:pointer;}
#nex-forms .icon-event .event_title .fa{font-size:48px !important;}
#nex-forms .icon-event .event_title.btn-lg .fa{font-size:68px !important;}
#nex-forms .icon-event .event_title.btn-sm .fa{font-size:32px !important;}
#nex-forms .icon-event .event_title.btn-xs .fa{font-size:22px !important;}
#nex-forms .fc-row .disabled{background:#f8f8f8;}
#nex-forms .alt-scroll-content {width: 100% !important; min-height:60px;}
#nex-forms .alt-scroll-holder{min-height:80px;min-width:100%;}
#nex-forms .styled-v-bar{ background:url(custom-scroll-bar.png) center top no-repeat;width: 10px;margin-right: 0;margin-bottom: 4px;}
#nex-forms .styled-v-bar ins{ display: block;background:url(custom-scroll-bar.png) center bottom no-repeat;width: 10px;height: 4px;position: absolute;top: 100%;}
#nex-forms .fc-calendar-container {position: relative;height: 400px;width: 400px;}
#nex-forms .custom-header {text-align: center;}
#nex-forms .fc-calendar {width: 100%;}
#nex-forms .fc-calendar .fc-head {height: 30px;line-height: 30px;}
#nex-forms .fc-calendar .fc-body {position: relative;width: 100%;height: 100% !important;height: -moz-calc(100% - 30px);height: -webkit-calc(100% - 30px);height: calc(100% - 30px);}
#nex-forms .fc-calendar .fc-row {width: 100%;border-bottom: 1px solid #ddd;}
#nex-forms .fc-four-rows .fc-row  {height: 25%;}
#nex-forms .fc-five-rows .fc-row  {height: 20%;}
#nex-forms .fc-six-rows .fc-row {height: 16.66%;height: -moz-calc(100%/6);height: -webkit-calc(100%/6);height: calc(100%/6);}
#nex-forms .fc-calendar .fc-row > div,#nex-forms .fc-calendar .fc-head > div {float: left;height: 100%;width:  14.28%; width: -moz-calc(100%/7);width: -webkit-calc(100%/7);width: calc(100%/7);position: relative;}
#nex-forms .ie9 .fc-calendar .fc-row > div,#nex-forms .ie9 .fc-calendar .fc-head > div {width:  14.2% !important;}
#nex-forms h3.custom-month-year {margin: 4px;}
#nex-forms .fc-calendar .fc-row > div {border-right: 1px solid #ddd;padding: 4px;position: relative;}
#nex-forms .fc-calendar .fc-head > div {text-align: center;}
#nex-forms .fc-calendar .fc-row > div span.fc-date {border-bottom-right-radius: 50%;color: #bbb;font-size: 14px;font-weight: 700;height: 40px;left: -4px;line-height: 35px;position: absolute;text-align: center;top: -4px;width: 40px;transform: scale(1); transition: all 0.3s ease-in-out;}
#nex-forms .fc-calendar .fc-row > div span.fc-date:hover{transform: scale(1.5); transition: all 0.3s ease-in-out;cursor:pointer;}
#nex-forms .fc-calendar .fc-row > div > span.fc-weekday {padding-left: 5px;display: none;}
#nex-forms .fc-calendar .fc-row > div.fc-today {}
#nex-forms .fc-calendar .fc-row > div.fc-out {opacity: 0.6;}
#nex-forms .fc-calendar .fc-row > div:last-child,#nex-forms .fc-calendar .fc-head > div:last-child {border-right: none;}
#nex-forms .fc-calendar .fc-row:last-child {border-bottom: none;}
#nex-forms span.icon-event {font-size: 100px;text-align: center;width: 100%;}
#nex-forms .style_bold{font-weight:bold !important;}
#nex-forms .style_italic{font-style:italic !important;}
#nex-forms .ui-nex-forms-container .grid-system .panel-body, 
#nex-forms .ui-nex-forms-container .grid-system .panel-body .row {padding: 0 !important;}
#nex-forms .animated{/*visibility:hidden;*/}
#nex-forms .visible {visibility: visible !important;}
#nex-forms .ui-nex-forms-container .grid-system {border: medium none !important;box-shadow: none;outline: medium none !important;padding: 0 !important;}
#nex-forms .ui-nex-forms-container .upload-single .input-group{width:100%;}
#nex-forms  div.fileinput a {position: relative;z-index: 100 !important;}
#nex-forms .timepicker-picker a.btn span {text-align: center;width: 40px;}
#nex-forms .bootstrap-datetimepicker-widget td span {height: 25px !important;line-height: 25px !important;}
#nex-forms .align_right{text-align:right !important; right:0;}
#nex-forms .align_left{text-align:left !important;}
#nex-forms .align_center{text-align:center !important;}
#nex-forms .align_justify{text-align:justify !important;}
#nex-forms div.form_field .help-block.input-lg,#nex-forms div.form_field .help-block.input-sm{padding:0;height:auto;}
#nex-forms .submit-button small {width: 100% !important;display: block !important;clear: both !important;margin-top: 7px !important;}
#nex-forms .ui-nex-forms-container .grid-system {margin-bottom: 15px !important;}
#nex-forms .grid-system .row, .grid-system .input_holder,#nex-forms .grid-system .col-sm-2,#nex-forms .grid-system .col-sm-10 {padding: 0 !important;margin: 0 !important;}
#nex-forms .grid-system .panel.grid-system > .panel-body {margin: 0 !important;padding: 10px !important;min-height: 61px !important;background:none;}
#nex-forms input[name="company_url"]{position:absolute !important;z-index:-1 !important;top:-100000px !important;}
#nex-forms .grid-system .panel.grid-system {border: 1px dotted #ccc;border-radius: 0 !important;margin: 0 !important;min-height: 61px !important;background:none;}
#nex-forms hr{border-color:#dddddd;margin:0 !important;}
#nex-forms p {background: none !important;}
#nex-forms .submit-button span.fa-spinner {}
#nex-forms .panel-heading.btn-lg, 
#nex-forms .panel-heading.btn-sm {border-bottom-left-radius: 0 !important;border-bottom-right-radius: 0 !important;}
#nex-forms .ui-nex-forms-container{visibility:hidden;}
#nex-forms .ui-nex-forms-container #field_container {margin-bottom: 10px !important;}
#nex-forms .ui-nex-forms-container label#title,#nex-forms .ui-nex-forms-container .help-block{display:none;}
#nex-forms .ui-nex-forms-container .form_field .input_holder .grid-system .panel {margin-right: 15px !important;}
#nex-forms .ui-nex-forms-container .form_field .input_holder:last-child > .grid-system .panel {margin-right: 0 !important;}
#nex-forms .ui-nex-forms-container .grid-system .panel.grid-system > .panel-body {padding: 0 !important;}
#nex-forms .ui-nex-forms-container .grid-system .panel.grid-system {border: medium none !important;margin: 0 !important;padding: 0 !important;}
#nex-forms .grid-system #field_container {padding: 0 !important;}
#nex-forms .form-control{width:100%;}
#nex-forms .square .form-control,#nex-forms .square .input-group-addon,#nex-forms .square .selectpicker,#nex-forms .square .dropdown-menu,#nex-forms .square .btn,#nex-forms .square .ui-slider-range,#nex-forms .square #slider,#nex-forms .square .panel:first-child, 
#nex-forms .square .panel-body:first-child, 
#nex-forms .square .panel-heading:first-child{border-radius: 0 !important;}
#nex-forms .full_rounded .form-control,#nex-forms .full_rounded .input-group-addon,#nex-forms .full_rounded .selectpicker,#nex-forms .full_rounded .btn{border-radius: 50% !important;}
#nex-forms .form_field.grid .panel {margin-bottom: 15px !important;}
#nex-forms .form_field.grid, 
#nex-forms .form_field.grid .input_holder {margin: 0 !important;}
#nex-forms div#nex-forms .color_pallet span.caret,#nex-forms .bootstrap-select.btn-group .btn .caret{margin-top:0 !important;}
#nex-forms .btn.selectpicker {text-align: left;}
#nex-forms small.sub-text{font-weight:normal;color:#999;}
#nex-forms .ui-slider {margin-left: 6px;margin-right: 20px;position: relative;text-align: left;}
#nex-forms .ui-slider .ui-slider-handle{width:auto !important;height:auto !important;padding:5px;text-decoration:none !important;outline:none;cursor:pointer !important;top:-10px !important;font-size:12px !important;}
#nex-forms span.ui-spinner {width: 100%;}
#nex-forms span.ui-spinner input{border:none;padding:0 !important;padding-left:10px !important;}
#nex-forms div#star img,span.star_holder{position:relative;}
#nex-forms div#star{width:100% !important;}
#nex-forms span.ui-spinner.ui-widget-content{border:1px solid #ddd;}
#nex-forms button,#nex-forms input,#nex-forms select,#nex-forms textarea{margin:0 !important;}
#nex-forms .is_required.btn-xs {padding: 0 !important;margin-right: 2px;font-size: 8px;top: -2px;}
#nex-forms .ui-slider-range-max:first-child {background: none repeat scroll 0 0 #F2F2F2;border:1px solid #ddd;}
#nex-forms .ui-slider-range-max:last-child {background: none repeat scroll 0 0 #FFFFFF;border:1px solid #ddd;}
#nex-forms .ui-slider{border:1px solid #ddd;}
#nex-forms .autocomplete, .autocomplete div.input-inner {z-index: 1001 !important;}
#nex-forms .ui-autocomplete {z-index: 1000 !important;background: #FFF !important;}
#nex-forms .the-radios .col-sm-12 {padding-left: 0;}
#nex-forms .prefix span, 
#nex-forms .postfix span {font-size: 17px;}
#nex-forms .heading .input_holder, 
#nex-forms .paragraph .input_holder, 
#nex-forms .divider .input_holder {margin: 0;}
#nex-forms .display-block{margin-right:0 !important;}
#nex-forms div.radio-group label.radio-inline,#nex-forms div.radio-group label.checkbox-inline,#nex-forms div.checkbox-group label{height: 30px;line-height: 30px;padding-left:35px;position: relative;}
#nex-forms div.radio-group label a,#nex-forms div.checkbox-group label a{position:absolute;top:0;left:0;text-decoration:none;}
#nex-forms div.input_holder{position:relative;margin-bottom:18px;}
#nex-forms div.input-inner{position:relative;top:2px;left:0;}
#nex-forms ul.selectpicker {display:block !important;}
#nex-forms .ui-nex-forms-container .paragraph .input-group,#nex-forms .ui-nex-forms-container .heading .input-group {width: 100% !important;}
#nex-forms h1.the_input_element,#nex-forms h2.the_input_element,#nex-forms h3.the_input_element,#nex-forms h4.the_input_element,#nex-forms h5.the_input_element,#nex-forms h6.the_input_element{color:#000;margin:0;font-weight:normal;}
#nex-forms svg{position:absolute;z-index:20;top:0;left:0;}
#nex-forms svg {pointer-events: none;}
#nex-forms .do_show {opacity: 1 !important;}
#nex-forms .do_hide {opacity: 0 !important;}
#nex-forms .line-drawing,#nex-forms .illustration {-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}
#nex-forms .line-drawing path {fill: none;stroke: #ccc;stroke-width: 1;}
#nex-forms path.line-round {stroke-linecap: round;}
#nex-forms path.stroke-medium {stroke-width: 2;}
#nex-forms path.stroke-thin {stroke-width: 0.5;}
#nex-forms .do_show, 
#nex-forms .do_hide {-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}
#nex-forms .fc-row .event_time {display: none;}
#nex-forms .fc-row .time_holder {border-bottom: none;}
#nex-forms .fc-row .day_time {display: none;}
#nex-forms .event_time .fa-clock-o {margin-right:4px;display:none;}
#nex-forms .time_holder:hover .event_time .fa-clock-o {display:inline-block;}
#nex-forms .time_holder .event_time{transform: scale(1);}
#nex-forms .time_holder:hover > .event_time{transform: scale(1.3);transition: all 0.4s ease-in-out;}
#nex-forms .sub-time {margin-left: 15px;}

Locations of all CSS files included:

/wp-content/plugins/nex-forms/css/

This plugin uses the following javascript files:

• jQuery
• Bootstrap
• Custom functions

We would like to thank Envato, WordPress, Bootstrap, Font Awesome and jQuery for their awsome platforms and ongoing improvement thereof as without it this plugin would not be possible.

And once again, thank you for purchasing this Plugin.

Basix