Hi all I'm trying to use dijit from the dojo library and trying to use the Calendar component. I followed the code as it is in the online documentation but it just doesn't seem to work. Below is the code that I'm using:
<html>
<head>
<link rel="stylesheet" type="text/css" href="dijit/themes/claro/claro.css"
/>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<style type="text/css">
.claro table.dijitCalendarContainer { margin: 25px auto; } #formatted
{ text-align: center; }
</style>
</head>
<body class=" claro ">
<div dojoType="dijit._Calendar" onChange="dojo.byId('formatted').innerHTML=dojo.date.locale.format(arguments[0], {formatLength: 'full', selector:'date'})">
</div>
<p id="formatted">
</p>
</body>
<script type="text/javascript" src="js/dojo.js" djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // loads the optimized dijit layer
dojo.require("dijit._Calendar");
</script>
</html>
Using firebug it shows the following error:
Could not load 'dijit._Calendar'; last
tried '../dijit/_Calendar.js'
Please can anyone help me on this. I really want to make this work.
Thanks in advance.
Your tree appears to have been changed, or at least you relocated the copy of dojo.js from the standard distribution. You should include dojo as "dojo/dojo.js" It will then use that reference to find relative urls in the tree, like ../dijit/_Calendar.js
Related
This might be a bug but I have no idea what I'm doing wrong.
I went to the trouble of making a JS Fiddle and sadly it's behaving fine there, but if you take the exact code and run it locally in chrome, the jqUI handles are all sitting at the top of the element instead of the outer edges? Here's the fiddle:
https://jsfiddle.net/ceL1j3kL
For sanity sake, I'm including a screen image of this behavior when I run it locally.
Does anyone know how to keep the handles in place when dynamically creating elements that are going to utilize the handles?
Heres the full source I'm working with:
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/style/chat.css" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="/scripts/test.js"></script>
</head>
<body>
</body>
</html>
css
html,
body {
height: 100%;
overflow: hidden;
margin:0;
padding:0;
}
js
$(document).ready(function(){
let c = $('<div id="container" style="width: 75%; height: 75%; background-color: black;">');
c.appendTo($('body'));
c.draggable({
containment: 'body'
});
c.resizable({
handles: 'all'
});
});
image of the behavior i'm seeing when running locally. you can see i'm hovering in the image over the south handle, which is at the north of the element and is not clickable....
You have to add jquery-ui.css reference in your project, for example:
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
I have kept the original files and folder structure this time,
Simply changed the code from the 'default.html' to display the events from google calendar. But as soon as I add that script, It doesn't display the calendar or the events.
I'm really lost.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
googleCalendarApiKey: 'MY KEY',
events: {
googleCalendarId: 'https://calendar.google.com/calendar/ical/ID%group.calendar.google.com/public/basic.ics'
}
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
You missed the gcal.js script that's required.
You need to include the following reference (after your fullCalendar.js):
<script type='text/javascript' src='fullcalendar/gcal.js'></script>
This file is included in the fullCalendar distribution.
See the full instructions for setting up fullCalendar with Google here - https://fullcalendar.io/docs/google_calendar/ - make sure you've set all the permissions on your calendar correctly as well at the Google side.
You are probably getting a script error. Press f12 in chrome and try again. You will probably see more about the issue.
I am having a problem with the jquery-ui datepicker widget. I have a simple html file where the widget displays and functions properly.
But when I try to incorporate the widget into my project the widget displays, and does function but the days of the month are way at the bottom:
Here is a simple html mockup file that has the same problem:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="javascript/jquery-1.11.2.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<script type="text/javascript" src="javascript/Chart.js"></script>
<script type="text/javascript" src="javascript/jRate.js"></script>
<script type="text/javascript" src="javascript/coffee-ratings.js"></script>
<script type="text/javascript" src="javascript/coffee-form.js"></script>
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
<!-- <link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.css"/> -->
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.structure.min.css"/>
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css"/>
<link rel="stylesheet" type="text/css" href="css/coffee.css"/>
<title>Create New Home Green Coffee Blend</title>
</head>
<body>
<table>
<tr><td>date: </td><td><input type="text" id="datepicker" name="date"/></td></tr>
</table>
</body>
</html>
since it works in the simple test file and not in the main project, it's not an OS thing. I've tried
doing a diff on the jquery-ui code in the test area and the main eclipse javascript folder, they are the same
adding and removing some of the different css files to see if that made a difference.
downloading a new copy of jquery-ui, copied to both folders, still got same behavior
The main app uses a new download of jquery, tried using the version that comes with jquery-ui was the same.
has to be some kind of css conflict. I did not see anything that grabbed me in firebug.
UPDATE
as I said in the comments, when I removed my main project css file, the datepicker rendered correctly. In playing around with my main css file, I was able to get the datepicker to display ok by commenting out the height in this block:
html, h1, div{
height: 100%;
padding: 0;
margin: 0;
}
but I need that in order to get the layout of the page to work.
any ideas?
thanks!
I am new to this site and to jQuery and I have a problem that is probably very simple but I cannot for the life of me solve it. I am running "index.html" from my computer and jquery.js (downloaded from jquery's website) is absolutely in the same folder and it seems to be referenced correctly in my code.
It was only meant to be a simple thing of clicking on a div and it would fade out. I really don't understand why it doesn't work.
Sorry if this is a really basic question, I have looked around the site and searched a lot.
index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="/jquery.js" type="text/javascript"></script>
<script src="/script.js" type="text/javascript"></script>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
</body>
</html>
style.css
div {
height: 300px;
width: 300px;
border: 2px solid black;
border-radius: 100%;
display: inline-block;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
script.js
$(document).ready(function() {
$('div').click(function() {
$('div').fadeOut('slow');
});
});
http://jsfiddle.net/ou43epos/
Try changing
<script src="/jquery.js" type="text/javascript"></script>
<script src="/script.js" type="text/javascript"></script>
to
<script src="jquery.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
The leading slash makes your browser look in the file system root. Without the slash, it'll load from the current (index.html) directory.
I just solved it! It was simple.. I put "/" before script and jquery. I didn't realise I could use the network tab to see what files were loaded.
Such a basic error but it drove me crazy for a long time! Such is life :).
Thanks all (especially #Juhana)
Using src="/jquery.js" to load your scripts results in your browser trying to load file:///C:/jquery.js. Change it to src="jquery.js".
As Mark Byers said in this answer:
If your browser is currently pointing at http://foo/bar/baz.html then:
• <a href="reset/index.html"> would link to http://foo/bar/reset/index.html.
• <a href="/reset/index.html"> would link to http://foo/reset/index.html.
I'm trying to test dojo Calendar. I was having problems so I made a test page and copied the example code from the dojo site. It manifested the same problem: the text is displayed with very large vertical gaps in it and little other formatting. I can't get the test on their page to work either so I don't know what it's supposed to look like.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css" />
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>
<script>
require(["dojo/parser", "dojo/ready", "dojox/calendar/Calendar"],
function(parser, ready, Calendar){
ready(function(){
calendar = new Calendar({
dateInterval: "day",
style: "position:relative;width:600px;height:600px"
}, "someId");
}
)}
);
</script>
</head>
<body class="claro">
<style type="text/css">
.dojoxCalendar{ font-size: 12px; font-family:Myriad,Helvetica,Tahoma,Arial,clean,sans-serif; }
</style>
<div id="someId" >
</div>
</body>
</html>
The only change I made was to use the libraries at ajax.googleapis.com. Should I also include dojox? I thought it came with dojo.js.
You missed including style file, add this into the head and it will be OK:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/calendar/themes/claro/Calendar.css" />
or see this jsfiddle