### Getting Started with Guiders.js

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/guidersjs/README.html

This final guider provides guidance on how to get started with Guiders.js, suggesting users examine the provided HTML file and visit the official website for more examples.

```javascript
guiders.createGuider({
  buttons: [{name: "Close", classString: "primary-button"}]
  description: "To get started, have a look at this HTML file, then emulate it for use in your own project. You can also see Guiders in action on our site, <a href=\"http://www.optimizely.com/guiders\">www.optimizely.com</a>",
  id: "finally",
  overlay: true,
  title: "Great, so how do I get started?",
  width: 500
});
```

--------------------------------

### Development Dependencies Installation

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/jquery/timepicker/README.md

Instructions for setting up the development environment by installing necessary dependencies like jQuery and Grunt using npm.

```bash
npm install
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/vtiger/vtigercrm/blob/master/layouts/v7/lib/jquery/fullcalendar/CONTRIBUTING.txt

Navigate into the cloned FullCalendar directory and install its dependencies using npm.

```bash
cd fullcalendar
npm install
```

--------------------------------

### Install Sphinx Dependencies

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/bootstrap/js/eternicode-bootstrap-datepicker/docs/README.md

Installs the necessary Python packages for building the documentation. Ensure you are in the docs folder.

```bash
$ sudo pip install -r requirements.txt
```

--------------------------------

### Install Grunt and Development Dependencies

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/bootstrap/js/eternicode-bootstrap-datepicker/README.md

Install Grunt CLI globally and then install project development dependencies using npm.

```bash
npm install -g grunt-cli
npm install
```

--------------------------------

### Include Full Handsontable Distribution

Source: https://github.com/vtiger/vtigercrm/blob/master/layouts/v7/lib/jquery/handsontable/README.md

Use this for a quick setup with all dependencies included. It requires linking to the full JavaScript and CSS files.

```html
<script src="dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="dist/handsontable.full.css">
```

--------------------------------

### Customizing Parser Configuration

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/PHPMarkdown/Readme.md

This example demonstrates how to instantiate the parser directly to customize its configuration variables before transforming text.

```APIDOC
## Customizing Parser Configuration

### Description
Allows for direct instantiation of the parser class to modify configuration variables, such as footnote ID prefixes, before transforming text.

### Method
`transform(string $text): string` (instance method)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```php
use \Michelf\MarkdownExtra;

$parser = new MarkdownExtra;
$parser->fn_id_prefix = "post22-";
$my_text = "This is a footnote[^1].";
$my_html = $parser->transform($my_text);
echo $my_html;
```

### Response
#### Success Response (string)
Returns the HTML-transformed string with custom parser configurations applied.

#### Response Example
```html
<p>This is a footnote<sup id="fnref:post22-1"><a class="footnote-ref" href="#fn:post22-1">[1]</a></sup>.</p>
```
```

--------------------------------

### Initialize Daterangepicker with Options

Source: https://github.com/vtiger/vtigercrm/blob/master/layouts/v7/lib/bootstrap-daterangepicker/README.md

Demonstrates how to create a new date range picker instance with initial start and end dates.

```javascript
$('#daterange').daterangepicker({ startDate: '2014-03-05', endDate: '2014-03-06' });
```

--------------------------------

### Install Bootstrap Notify via Bower

Source: https://github.com/vtiger/vtigercrm/blob/master/layouts/v7/lib/bootstrap-notify/README.md

Use this command to install the Bootstrap Notify plugin using the Bower package manager.

```bash
bower install bootstrap.notify 
```

--------------------------------

### Install Dependencies with npm

Source: https://github.com/vtiger/vtigercrm/blob/master/layouts/v7/lib/animate/README.md

Install Grunt and other necessary dependencies for building custom Animate.css versions using npm.

```sh
cd path/to/animate.css/
sudo npm install
```

--------------------------------

### Install gulp-cli Globally

Source: https://github.com/vtiger/vtigercrm/blob/master/layouts/v7/lib/jquery/fullcalendar/CONTRIBUTING.txt

Install the gulp-cli package globally to manage build tasks. This is a prerequisite for the development workflow.

```bash
npm install -g gulp-cli
```

--------------------------------

### ADOConnection MetaType Setup

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/adodb_vtigerfix/docs/changelog_v4.x.md

Ensures the ADOConnection::MetaType method correctly sets up the $rs->connection property.

```php
$rs->connection = $this;
```

--------------------------------

### Required Files for Installation

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/jquery/multiplefileupload/documentation.html

Include these script tags in your HTML to use the jQuery Multiple File Upload plugin.

```html
<script src="jquery-latest.js" type="text/javascript" language="javascript"></script>
    <script src="jquery.MultiFile.js" type="text/javascript" language="javascript"></script>
```

--------------------------------

### Run Tests via Command Line

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/bootstrap/js/eternicode-bootstrap-datepicker/tests/README.md

Execute the test suite from the command line after installing Grunt. This is a recommended step before running tests.

```bash
$ grunt test
```

--------------------------------

### Initialize Communication (JavaScript)

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/jquery/ckeditor/plugins/wsc/dialogs/ciframe.html

Sets up an interval to periodically send data and starts listening for incoming messages. This function should be called on page load.

```javascript
function onLoad() {
  interval = window.setInterval( sendData2Master, 100 );
  listenPostMessage();
}
```

--------------------------------

### Basic Google API Client Usage in PHP

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/google-api-php-client/README.md

Demonstrates how to initialize the Google Client, set an application name and developer key, and make a basic API call to the Books service to search for volumes. Ensure the autoload.php is correctly referenced.

```PHP
<?php
  require_once 'google-api-php-client/autoload.php'; // or wherever autoload.php is located
  $client = new Google_Client();
  $client->setApplicationName("Client_Library_Examples");
  $client->setDeveloperKey("YOUR_APP_KEY");
  $service = new Google_Service_Books($client);
  $optParams = array('filter' => 'free-ebooks');
  $results = $service->volumes->listVolumes('Henry David Thoreau', $optParams);

  foreach ($results as $item) {
    echo $item['volumeInfo']['title'], "<br /> \n";
  }

```

--------------------------------

### Create and Show a Basic Guider

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/guidersjs/README.md

Initializes a guider with basic content and immediately displays it. Use this for simple introductory messages.

```javascript
guiders.createGuider({
  buttons: [{name: "Next"}],
  description: "Guiders are a user interface design pattern for introducing features of software. This dialog box, for example, is the first in a series of guiders that together make up a guide.",
  id: "first",
  next: "second",
  overlay: true,
  title: "Welcome to Guiders.js!"
}).show();
/* .show() means that this guider will get shown immediately after creation. */
```

--------------------------------

### Create and Show Initial Guider

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/guidersjs/README.html

This snippet demonstrates how to create and immediately display the first guider in a sequence. It includes basic settings like title, description, and navigation to the next guider.

```javascript
guiders.createGuider({
  buttons: [{name: "Next"}]
  description: "Guiders are a user interface design pattern for introducing features of software. This dialog box, for example, is the first in a series of guiders that together make up a guide.",
  id: "first",
  next: "second",
  overlay: true,
  title: "Welcome to Guiders.js!"
}).show();
```

--------------------------------

### Disable Auto Session Start

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/csrf-magic/README.txt

Prevent CSRF-Magic from automatically starting a session by setting 'auto-session' to false in csrf_startup().

```php
csrf_conf('auto-session', false);
```

--------------------------------

### Basic ADOdb Connection and Query

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/adodb_vtigerfix/README.md

Demonstrates how to include the ADOdb library, establish a database connection with debugging enabled, execute a query, and display the results. Customize connection parameters for your specific database.

```php
<?php
include('adodb/adodb.inc.php');

$db = adoNewConnection($driver); # eg. 'mysqli' or 'oci8'
$db->debug = true;
$db->connect($server, $user, $password, $database);
$rs = $db->execute('select * from some_small_table');
print "<pre>";
print_r($rs->getRows());
print "</pre>";

```

--------------------------------

### Basic Setup and Initialization

Source: https://github.com/vtiger/vtigercrm/blob/master/layouts/v7/lib/bootstrap-daterangepicker/README.md

Include necessary JavaScript and CSS files, then initialize the date range picker on a target input element. This sets up the basic functionality for selecting a date range.

```html
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />
```

```javascript
$(document).ready(function() {
  $('input[name="daterange"]').daterangepicker();
});
```

--------------------------------

### JavaScript Style Guide Exceptions

Source: https://github.com/vtiger/vtigercrm/blob/master/layouts/v7/lib/jquery/fullcalendar/CONTRIBUTING.txt

Follow the Google JavaScript Style Guide with specific exceptions for else/else if/catch placement, and one-line array/object literal formatting.

```javascript
if (true) {
}
else { // please put else, else if, and catch on a separate line
}

// please write one-line array literals with a one-space padding inside
var a = [ 1, 2, 3 ];

// please write one-line object literals with a one-space padding inside
var o = { a: 1, b: 2, c: 3 };
```

--------------------------------

### Basic Initialization

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/jquery/garand-sticky/README.md

Include jQuery and the sticky plugin, then initialize it on an element with desired options.

```APIDOC
## Basic Initialization

### Description
Include jQuery & Sticky. Call Sticky.

### Method
```javascript
$(document).ready(function(){
  $("#sticker").sticky({topSpacing:0});
});
```

### Parameters
#### Options
- **topSpacing** (number) - Pixels between the page top and the element's top.
- **bottomSpacing** (number) - Pixels between the page bottom and the element's bottom.
- **className** (string) - CSS class added to the element's wrapper when "sticked".
- **wrapperClassName** (string) - CSS class added to the wrapper.
- **getWidthFrom** (selector) - Selector of element referenced to set fixed width of "sticky" element.
- **responsiveWidth** (boolean) - Determines whether widths will be recalculated on window resize (using getWidthfrom).
```

--------------------------------

### Get Time as String using val()

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/jquery/timepicker/README.md

An alternative to getTime, this shows how to get the time value as a formatted string directly from the input element using jQuery's val() function.

```javascript
$('#getTimeExample').val();
```

--------------------------------

### Clone FullCalendar Repository

Source: https://github.com/vtiger/vtigercrm/blob/master/layouts/v7/lib/jquery/fullcalendar/CONTRIBUTING.txt

Clone the FullCalendar git repository to your local machine to start contributing.

```bash
git clone git://github.com/fullcalendar/fullcalendar.git
```

--------------------------------

### Check Code Style

Source: https://github.com/vtiger/vtigercrm/blob/master/layouts/v7/lib/jquery/fullcalendar/CONTRIBUTING.txt

Run 'gulp lint' to automatically check your code against the style guide.

```bash
gulp lint
```

--------------------------------

### Introducing New Features to Existing Users

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/guidersjs/README.html

This snippet shows how guiders can be used to introduce new features to existing users, similar to promotional boxes used in applications like Gmail. It includes an example of embedding an image within the guider description.

```javascript
guiders.createGuider({
  buttons: [{name: "Next"}]
  description: "Guiders can also be used to introduce of brand new features to existing users. Here is an example of a guider in Gmail. Google's CSS calls this a promo, likely short for promotional box. <br/><br/> <img src=\"promo_gmail.png\" style=\"border: 1px solid #333;\" />",
  id: "fifth",
  next: "finally",
  overlay: true,
  title: "How else can I use guiders?",
  width: 550
});
```

--------------------------------

### option

Source: https://github.com/vtiger/vtigercrm/blob/master/layouts/v7/lib/jquery/timepicker/README.md

Allows getting or setting timepicker options. Setting an option on a visible picker will hide it.

```APIDOC
## option

### Description
Change the settings of an existing timepicker. Calling ```option``` on a visible timepicker will cause the picker to be hidden.

### Method
```javascript
$('#optionExample').timepicker({ 'timeFormat': 'g:ia' }); // initialize the timepicker sometime earlier in your code
...
$('#optionExample').timepicker('option', 'minTime', '2:00am');
$('#optionExample').timepicker('option', { 'minTime': '4:00am', 'timeFormat': 'H:i' });
```
```

--------------------------------

### CSS Transition for Notifications

Source: https://github.com/vtiger/vtigercrm/blob/master/layouts/v7/lib/bootstrap-notify/README.md

Example of a CSS transition property that can be used for controlling the animation of notifications.

```css
tranition: all 0.5 ease-in-out;
```

--------------------------------

### Customizing Guider Buttons and Content

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/guidersjs/README.html

This example demonstrates advanced customization options for guiders, including custom button text, `onclick` handlers, and the addition of custom HTML content like checkboxes. It also mentions CSS customization for styling.

```javascript
guiders.createGuider({
  attachTo: "#clock",
  buttons: [{name: "Exit Guide", onclick: guiders.hideAll}, {name: "Continue", onclick: guiders.next}]
  buttonCustomHTML: "<input type=\"checkbox\" id=\"stop_showing\" /><label for=\"stop_showing\" class=\"stopper\">Optional checkbox. (You can add one.)</label>",
  description: "Other aspects of the guider can be customized as well, such as the button names, button onclick handlers, and dialog widths. You'd also want to modify the CSS to your own project's style.",
  id: "fourth",
  next: "fifth",
  position: 7,
  title: "Guiders can be customized.",
  width: 600
});
```

--------------------------------

### Build HTML Documentation

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/bootstrap/js/eternicode-bootstrap-datepicker/docs/README.md

Generates the HTML output for the project documentation. The output will be located in the `_build/html/` directory.

```bash
$ make html
```

--------------------------------

### inflection.indexOf

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/jquery/node-inflection/Readme.md

Checks if an array contains a given element, with optional starting index and custom comparison function.

```APIDOC
## inflection.indexOf( arr, item, from_index, compare_func )

### Description
This lets us detect if an Array contains a given element.

#### Arguments

> arr

	type: Array
	desc: The subject array.

> item

	type: Object
	desc: Object to locate in the Array.

> from_index

	type: Number
	desc: Starts checking from this position in the Array.(optional)

> compare_func

	type: Function
	desc: Function used to compare Array item vs passed item.(optional)

### Example code

	var inflection = require( 'inflection' );

	inflection.indexOf([ 'hi','there' ], 'guys' ); // === -1
	inflection.indexOf([ 'hi','there' ], 'hi' ); // === 0
```

--------------------------------

### Apply Configuration from Data Attributes

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/bootstrap/js/eternicode-bootstrap-datepicker/docs/index.md

When using data attributes for configuration, you can still provide additional options via the JavaScript options hash. This example shows applying a 'startDate' option.

```javascript
 $('.datepicker').datepicker({
    startDate: '-3d'
})
```

--------------------------------

### Get Localized Dates

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/bootstrap/js/eternicode-bootstrap-datepicker/docs/methods.md

Retrieves a list of localized date objects representing all selected dates in a multidate picker.

```javascript
 $('.datepicker').datepicker('getDates');
```

--------------------------------

### Create and Checkout New Branch

Source: https://github.com/vtiger/vtigercrm/blob/master/README.md

Create a new branch for your changes and switch to it. Use a descriptive name for the branch.

```bash
git branch fix_projects_on_calendar
git checkout fix_projects_on_calendar
```

--------------------------------

### Build Distributable Files

Source: https://github.com/vtiger/vtigercrm/blob/master/layouts/v7/lib/jquery/fullcalendar/CONTRIBUTING.txt

After making changes, run 'gulp dist' to generate the distributable files in the ./dist/ directory.

```bash
gulp dist
```

--------------------------------

### PJAX Initialization with Loading Spinner

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/jquery/defunkt-jquery-pjax/README.md

Demonstrates initializing PJAX and showing a loading spinner during the AJAX request. The spinner is shown before the request and hidden after content is loaded.

```APIDOC
## HTML
<div id='main'>
  <div class='loader' style='display:none'><img src='spin.gif'></div>
  <div class='tabs'>
    <a href='/explore'>Explore</a>
    <a href='/help'>Help</a>
  </div>
</div>

## JavaScript
```javascript
// Extend jQuery to add a showLoader method
$.fn.showLoader = function() {
  this.each(function() {
    $(this).find('.loader').show();
  });
  return this;
};

$('a').pjax('#main').on('click', function(){
  $(this).showLoader();
});
```
```

--------------------------------

### Get URL Parameter (JavaScript)

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/jquery/ckeditor/plugins/wsc/dialogs/ciframe.html

Extracts a URL parameter value by its name. Handles special characters in parameter names.

```javascript
function gup( name ) {
  name = name.replace( /[\[\]]/g, "\\$&" );
  var regex = new RegExp( "[?&]" + name + "=([^&#]*)" );
  var results = regex.exec( window.location.href );
  return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
```

--------------------------------

### Initialize lazyYT Plugin

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/jquery/lazyYT/demo/index.html

Use this snippet to activate the lazyYT plugin on YouTube video placeholders. Ensure jQuery is loaded before this script.

```javascript
$(document).ready(function() {
  $(".js-lazyYT").lazyYT();
});
```

--------------------------------

### Conditional AJAX Rewriting

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/csrf-magic/README.txt

Turn off AJAX rewriting when the content is not HTML, for example, when processing POST requests with an 'ajax' parameter.

```php
if (isset($_POST['ajax'])) csrf_conf('rewrite', false);
```

--------------------------------

### Multi-lingual Support via Class (Multiple Elements)

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/jquery/multiplefileupload/documentation.html

Configure MultiFile programmatically for multiple elements sharing a specific class, including custom multi-lingual strings and file restrictions. This example sets Portuguese strings and accepts only gif/jpg files, with a maximum of 3 files for elements with the class 'multi-pt'.

```html
<input type="file" class="multi-pt" />
    <input type="file" class="multi-pt" />
    <input type="file" class="multi-pt" />
```

```javascript
$(function(){
     $('.multi-pt').MultiFile({
      accept:'gif|jpg', max:3, STRING: {
       remove:'Remover',
       selected:'Selecionado: $file',
       denied:'Invalido arquivo de tipo $ext!',
       duplicate:'Arquivo ja selecionado:\n$file!'
      }
     });
    });
```

--------------------------------

### Cache Name Generation with Fetch Mode

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/adodb_vtigerfix/docs/changelog_v4.x.md

Modified _gencachename() to include fetchmode in the name hash. Clear cache directory after installation.

```php
Modified _gencachename() to include fetchmode in name hash.
```

--------------------------------

### Configure MultiFile with Class Properties

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/jquery/multiplefileupload/documentation.html

Configure the plugin using class names like 'max-X' for file limits and 'accept-Y|Z' for allowed file types. Server-side validation is always required.

```html
<input type="file" class="multi max-2"/>
```

```html
<input type="file" class="multi accept-gif|jpg"/>
```

```html
<input type="file" class="multi max-3 accept-gif|jpg"/>
```

--------------------------------

### Default Axes and Series Options

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/jquery/jqplot/optionsTutorial.txt

Apply default settings to all axes (e.g., starting at 0) and all series (e.g., hiding markers).

```javascript
optionsObj = {axesDefaults:{min:0}, seriesDefaults:{showMarker:false}}
```

--------------------------------

### Set Start Date Limit

Source: https://github.com/vtiger/vtigercrm/blob/master/libraries/bootstrap/js/eternicode-bootstrap-datepicker/docs/methods.md

Sets a new lower date limit for the datepicker. Provide a falsey value to unset the limit.

```javascript
 $('.datepicker').datepicker('setStartDate', new Date(2023, 0, 1));
```