I am new with dhtmlxscheduler. I have created some demo schedulers. As everyone knows, we can make custom lightbox and send data accordingly, however, what I really want to know is how to send a default variable's data to database from php. Well, I know it sounds messy. Let me make it clear. Below is my scheduler.html:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>How to start</title>
<link rel="stylesheet" href="dhtmlxScheduler/codebase/dhtmlxscheduler.css" type="text/css">
<style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
</head>
<script>
function init() {
scheduler.config.multi_day = true;
scheduler.config.xml_date="%Y-%m-%d %H:%i";
var d = new Date();
var m = d.getMonth();
var y = d.getFullYear();
scheduler.config.limit_start = new Date(y,m,1);
scheduler.config.limit_end = new Date (2100,0,1);
scheduler.init('scheduler_here', new Date(), "month");
//scheduler.load("dhtmlxScheduler/demo_php/data.php");
scheduler.locale.labels.section_type = "Type";
scheduler.config.lightbox.sections = [
{name:"description", height:200, map_to:"text", type:"textarea" , focus:true},
{name:"type", height:21, map_to:"type", type:"select", options:[
{key:"Call", label:"Call"},
{key:"Appointment", label:"Appointment"},
{key:"Both", label:"Both"}
]},
{name:"time", height:72, type:"time", map_to:"auto"},
];
scheduler.load("dhtmlxScheduler/samples/01_initialization_loading/data/types.php", function(){
scheduler.showLightbox(2);
});
var dp = new dataProcessor("dhtmlxScheduler/samples/01_initialization_loading/data/types.php");
dp.enableUTFencoding(true);
dp.init(scheduler);
function show_minical(){
if (scheduler.isCalendarVisible())
scheduler.destroyCalendar();
else
scheduler.renderCalendar({
position:"dhx_minical_icon",
date:scheduler._date,
navigation:true,
handler:function(date,calendar){
scheduler.setCurrentView(date);
scheduler.destroyCalendar()
}
});
}
</script>
<body onload="init();return false;">
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_minical_icon" id="dhx_minical_icon" onclick="show_minical()"> </div>
<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>
</div>
<script src="dhtmlxScheduler/codebase/dhtmlxscheduler.js" type="text/javascript"></script>
<script src="dhtmlxScheduler/codebase/ext/dhtmlxscheduler_limit.js" type="text/javascript"></script>
<script src="dhtmlxScheduler/codebase/ext/dhtmlxscheduler_minical.js" type="text/javascript"></script>
<script src="dhtmlxScheduler/codebase/ext/dhtmlxscheduler_collision.js"></script>
</body>
</html>
And this is my types.php:
<?php
require_once('../../common/connector/scheduler_connector.php');
include('../../common/config.php');
$doctor_id=1;
$scheduler = new schedulerConnector($res, $dbtype);
$scheduler->render_table("tevents", "event_id","start_date,end_date,event_name,type","extra");
?>
What I actually want to do is to insert the value of $doctor_id to the "extra" column of "tevents" table. What am I supposed to do ?
Thanks in advance !!!
Related
I am trying to add a draggable to the frames but it is not working and throwing the below exception
created the Frames using iframe but could not apply the draggable for my frames.Please help me to solve my problem.
Uncaught ReferenceError: HSplitter is not defined at HTMLDivElement.onmousedown
Please find my code below:
var HSplitter = {
mouseDown: function (_split, event)
{
if(!this.isToggle)
{
this.parent = _split.parentNode.parentNode; //td
this.currentSplit = _split;
this.splitterWidth = $(this.currentSplit).getWidth();
this.splitPointX = Event.pointerX(event);
this.drag = true;
this.splitDiv = $(this.parent).getElementsByClassName("HSplitDiv")[0];
//min width of a parent container couldn't be less than splitter width.
if( this.minWidth < this.splitterWidth )
this.minWidth = this.splitterWidth;
this.mouseOver(_split, event);
$(this.splitDiv).setStyle({paddingRight: '0px'}); //reset padding
this._splitDivOverflow(true); //set overflow to ON
}
},
mouseUp: function (split, event)
{
if(!this.isToggle)
{
this.drag = false;
this._setDynamicOverflow();
}
},
};
<head>
<link href="/Work/css/tab_style.css" type="text/css" rel="stylesheet"/>
<link href="D:/cnsdi-projects/style.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" href="/Work/css/1.10.19/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="/Work/css/1.10.19/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script type="text/javascript" src="/Work/js/3.3.7/bootstrap.min.js">
</script>
</head>
<body>
<div class="tab-content" >
<div id="sectionA" class="tab-pane fade in active" style="overflow:visible;">
<iframe scrolling="yes" src="pg1.html" name="leftside" style="position:absolute;top:140px;left:0%;width:25%;height:100%;border: none;" ></iframe>
<div class="split1" onselect="return false;" unselectable="on" onmouseup="HSplitter.mouseUp(this, event);" onmousedown="HSplitter.setMaxMinWidth('-1','-1'); HSplitter.mouseDown(this, event);" style="left: auto;">
<span class="collapse l-splt-btn" onclick="HSplitter.splitToggle(this);"></span>
</div>
<iframe src="pg2.html" name="rightside" scrolling="yes" style="position:absolute;top:140px;left:25%;width:75%;height:50%;border: none;"></iframe>
<div class="split"><div class="vcollapse d-splt-btn" onclick="VSplitter.splitToggle(this);" toppaneheight="50%" id="idx1320192_vspltbtn"></div></div>
<iframe src="pg3.html" name="rightside" scrolling="yes" style="position:absolute;top:450px;left:25%;width:75%;height:30%;border: none;"></iframe>
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js"></script>
Please input this code in your site header and if it doesn't work , let me know.
Thank you!
I am Working on a project in which I am trying to display a clock inside container so that the clock becomes responsive. I was hoping if someone can guide me on how to go about it.
Below is the HTML page where I am trying to display the same.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> UA </title>
<meta name="description" content="EVERYTHING FINE">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<style>
.grey{
background-color: #ccc;
padding: 20px;
}
</style>
</head>
<body>
<header>
<div class="jumbotron">
<div class="container">
<script>
............
</script>
</div>
</div>
</header>
<div class="grey">
<div class="container">
<div class="well">R&D</div>
</div>
</div>
<footer>
<div class="container">
<hr>
<p>
<small>Jump To TrueTasawwuf TRUE TASAWWUF</small></p>
<!--<p> <small>Ask whatever On Twitter</small></p>-->
<!--<p> <small>Subscribe me On Youtube</small>-->
</p>
</div> <!-- end container -->
</footer>
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Something like this should work for you.
<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
Note: You don't need to insert a script or something for this purpose.
You could build a clock using the jquery you imported
make sure you put the script after your jquery script tags
<script type="text/javascript">
$(document).ready(function(){
var timer = setInterval(clock, 1)
function clock(){
$(".demo").html(Date());
}
});
</script>
<body>
<p class="demo"></p>
</body>
I have used nicEditor in my winforms by loading a web browser and loading the nicEditor inside it. By default when the editor loaded and after that I click in the middle of the editor the focus doe not go to nicEditor. But if I click right at the start of the editor, focus is set to the editor. Following is my HTML file code.
<html>
<head>
<script type="text/javascript">
var myInstance = "";
function GetContent() {
//window.alert(""+myInstance);
//var content = tinyMCE.get('tinyMceEditor').getContent();
//content = content.replace("<body>", "<body style=\"font-size:10px;\">");
//var content = nicEditors.get('area3').getContent();
var content = myInstance.instanceById('editor').getContent();
//window.alert(myInstance.instanceById('editor').getContent());
return content;
}
function SetContent(htmlContent) {
setTimeout(function () {
//window.alert(htmlContent);
//nicEditors.get('area3').setContent(htmlContent);
myInstance.instanceById('editor').setContent(htmlContent);
if (htmlContent == undefined || htmlContent == '')
myInstance.instanceById('editor').setContent('');
//tinyMCE.get('tinyMceEditor').readOnly = true;
}, 100);
}
</script>
<script type="text/javascript" src="jscripts/nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function () {
//myInstance = new nicEditor().panelInstance('editor');
myInstance = new nicEditor({ maxHeight: 388 }).panelInstance('editor');
//nicEditors.allTextAreas()
});
</script>
</head>
<body style="margin-top: 0px; margin-left: 0px;">
<div id="sample">
<textarea id="demo" cols="50" id="editor" name="editor" style="width:295px;" >
</textarea>
</div>
</body>
</html>
Please help.
Its working with this way.
but i am not getting what you are trying to do using below script .
<script type="text/javascript">
bkLib.onDomLoaded(function () {
//myInstance = new nicEditor().panelInstance('editor');
myInstance = new nicEditor({ maxHeight: 388 }).panelInstance('editor');
//nicEditors.allTextAreas()
});
</script>
here is my simple HTML . Now let me know what exactly you want to do .
<html>
<head>
</head>
<body style="margin-top: 0px; margin-left: 0px;">
<div id="sample">
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
</script>
<textarea id="demo" cols="50" id="editor" name="editor" style="width:295px;" >
</textarea>
</div>
</body>
</html>
Looking for something like this,
Just let me know if i am wrong anywhere.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
.heightClass {
min-height: 338px !important;
}
</style>
<body style="margin-top: 0px; margin-left: 0px;">
<div id="sample">
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
$(document).on("focus" , ".nicEdit-selected" , function () {
var parentTag = $( this ).css("height" , "338px");
//$( this ).addClass("heightClass");
//alert(parentTag);
});
</script>
<textarea id="demo" cols="50" id="editor" name="editor" style="width:295px;" >
</textarea>
</div>
</body>
</html>
I wanted to dynamically append a Table/List to HTML page. My code as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Lead Manager</title>
<link rel="stylesheet" href="themes/Bootstrap.css">
<link rel="stylesheet" href="themes/jquery.mobile.structure-1.2.0.min.css" />
<script src="themes/jquery-1.8.2.min.js"></script>
<script src="themes/jquery.mobile-1.2.0.min.js"></script>
</head>
<body id="body" name="body">
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline">
<h1>Lead Manager</h1>
</div>
<div data-role="content" data-theme="a">
<h2>List of Leads</h2>
</div>
</div>
</body>
<script>
$(document).ready(function(e) {
//var data = Android.getLeads();
var data = [{"status":"1","name":"1","campaign":"1","date":"1"},{"status":"2","name":"2","campaign":"2","date":"2"}];
var items = [];
var date;
var name;
var status;
//eval(" var x = " + data + " ; ");
//var y = JSON.stringify(x);
$.each(data, function(key,val){
items.push('<tr><td>' + val.date + '</tr></td>');
});
var text = $('<table/>', { html: items.join('')});
$('<table/>', {
html: items.join('')
}).appendTo('body');
});
</script>
</html>
The Items[] variable is getting filled with the tr and td values. However, the appendTo, doesnt work. The JSON as you can see doesnt require eval as its already in the format required.
Please can you help?
The issue was mainly because of the jquery.mobile script as it wasnt allowing dynamic addition of html code.
I want to implement a suggestion combobox which shows suggestions grabbed from my own web service (using restapi and jsonp). I found that ComboBox.store.root.children contains suggestion's data and wrote the code below. For the simplicity I use there array instead of getting suggestions from my service.
The problem with that is it looks like a hack and some features don't work properly. For instance, I can't get rid of 'Search' phrase in the list.
Can you suggest more elegant solution?
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.ComboBox");
</script>
<script type="text/javascript">
dojo.addOnLoad(function() {
var cb = dijit.byId("searchQuery");
var bufToClone = cb.store.root.children[0];
cb.store.root.children[0] = null;
var suggestions = ["AAA", "BBB", "CCC"];
dojo.connect(cb, "onKeyPress", function(event) {
var newval = cb.textbox.value;
dojo.forEach(suggestions, function(entry, i) {
var newVal = dojo.clone(bufToClone);
newVal.value = entry;
newVal.text = entry;
cb.store.root.children[i] = newVal;
});
});
});
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<select dojoType="dijit.form.ComboBox" id="searchQuery" name="searchQuery" class="sQ">
<option>
Search
</option>
</select>
</body>
Are you expecting this
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"/>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
</script>
<script type="text/javascript">
var idg = 4;
dojo.addOnLoad(function() {
str = new dojo.data.ItemFileWriteStore({
data:{
identifier:'id',
label:'name',
items:[
{id:1,name:'me'},
{id:2,name:'you'},
{id:3,name:'stackoverflow'}
]
}
})
new dijit.form.ComboBox({
store:str,
name:"searchQuery",
onChange:function(){
alert(dojo.query("[name=searchQuery]")[0].value)
}
},"searchQueryHld")
});
</script>
</head>
<body class=" claro ">
<span id="searchQueryHld"></span>
<span dojoType="dijit.form.Button">
Add one option
<script type="dojo/method" event="onClick">
str.newItem({id:idg,name:'me'+idg})
idg++;
</script>
</span>
</body>
</html>