eValert.js

eVents alert - jQuery plugin

About:

Provides a window alarms and alarm events.
The alerts will appear before minutes, hours, days or weeks according to your choice.
Additionally You can choose also when the event occurs.

Features:

Installation:

Add in the header of your html page:

Usage:

add in the BODY <div id="my_events_example"></div>
and then add javascript code: 
<script type="text/javascript">
	$('#my_events_example').evalert({
		//here eValert options
	});
</script>
Example: 
<script type="text/javascript">
$('#my_events_example').evalert({
	eventParams:{
		'Event-1':[
			'2017-01-02',
			'14:45',
			'TYPE=ALERT;BFOR=MIN;VAL=1',
			'http://localhost/my_tiny_todo/',
			'#4CAF50',
			'white',
		],
		'Event-2':[
			'2017-01-02',
			'14:47',
			'TYPE=ALERT;BFOR=MIN;VAL=1',
			'',
			'#2196F3',
			'black',		
		]
	},
	alertWinWidth: '300px',
	alertWinHeight: '80px',
	alertWinPos: 'fbl',
	title: 'Alerts',
	titleBgColor: 'red',
	titleTextColor: 'white'
});
</script>
Result:

eValert options:

Name Description Options Default
eventSource Type of data file. '' - Do not use external data. must use eventParams,for details, see below.
'json' - use json file
'php' - use php source
 ''
eventUrl Path to events/alerts file. 'path/to/myevents.json'
'path/to/myevents.php'
eventParams Object that contains the event data and alarm parametrs. format:
{
	'Event name -1':[
		'event date',
		'event time',
		'alarm parametrs',
		'url',
		'background color',
		'text color',
	],
	'Event name -2':[
		'2017-01-30',
		'14:50',
		'TYPE=ALERT;BFOR=MIN;VAL=1',
		'http://your/link/of/this/event.html',
		'#2196F3',
		'black',		
	]
}
Where:
  • 'event date': the event date in format YYYY-MM-DD ,where YYYY-year, MM-month, DD-day , e.g:'2017-01-30'.(must)
  • 'event time': the event time in 24 hours format hh:mm ,where hh-hour, mm-minutes , e.g:'14:50'.
    (optional - but if this empty(''), the default time will be '00:00').
  • 'alarm parametrs': format: 'TYPE=alert;BFOR=bb;VAL=value',
    Where:
    • alert: ALERT (Uppercase)
    • bb: WEEK , DAY , HOUR , MIN (Uppercase)
    • value: intiger number.
    Example:
    'TYPE=ALERT;BFOR=WEEK;VAL=2' - Alert 2 weeks befor the event occur.
    'TYPE=ALERT;BFOR=DAY;VAL=3' - Alert 3 days befor the event occur.
    'TYPE=ALERT;BFOR=HOUR;VAL=4' - Alert 4 hours befor the event occur.
    'TYPE=ALERT;BFOR=MIN;VAL=45' - Alert 45 minutes befor the event occur.
  • 'url': link for this event.(optional)
  • 'background color': background color of this event. (optional - but if this empty(''), the default will be 'red')
  • 'text color': text color of this event. (optional - but if this empty(''), the default will be 'white')
eventOntimeAlert Do alert when the event occurs? true-show alert when the event occur.
false-don't show alert when the event occur.
 true
alertWinPos The position of the DIV (Alerts window) relative to its parent alemnt.
note: If it has no parent, then will be relative to <BODY&gt		 Options:
Namethe location
falseyour css style
'tl'top left of the page
'tr'top right of the page
'bl'bottom left of the page
'br'bottom right of the page
'ftl'fixed top left of the page
'ftr'fixed top right of the page
'fbl'fixed bottom left of the page
'fbr'fixed bottom right of the page
'draggable'draggable window
false
alertWinWidth The width of the Alerts window. falseauto (100%).
width in px.		 false
alertWinHeight The height of the Alerts window. false-80px.
height in px.		 false
title The title of Alerts window. text 'Events Box'
newAlertFirst Order of appearance of alerts. true-new alert first.
false-new alert last.		 true
bodyBorderColor Border Color of Alerts window. color value white
titleBgColor background color of the title of the Alerts window. color value #03a9f4
titleTextColor Text color of the title of the Alerts window. color value white
titleFontSize The font size of the title of the Alerts window. font size value 15px
contentBgColor background color of the content area of the Alerts window. color value white
contentFontSize The font size of the content area of the Alerts window. font size value 10px

Alerts Window

Using json file and Ajax php

click here

Licensing

GPLv3