I was trying to work with Toast UI calendar available here:
https://github.com/nhn/tui.calendar
I tried to use it via CDN which requires us to insert the following:
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.css" />
<!-- If you use the default popups, use this. -->
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" />
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css" />
<script src="https://uicdn.toast.com/tui.code-snippet/latest/tui-code-snippet.js"></script>
<script src="https://uicdn.toast.com/tui.dom/v3.0.0/tui-dom.js"></script>
<script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>
When I tried to create a calendar in my html file, I noticed that it lacked a few functions such as date-picker, render-range, or even the event scheduler pop-up. I also noticed that they talk of tui-code-snippet as a dependency for this calendar:
https://github.com/nhn/tui.calendar#-dependency
However, I'm not sure what to include from the tui-code-snippet exactly, as there are a bunch of functions in there and they state that we should only import the functions we need from it:
https://github.com/nhn/tui.code-snippet#-usage
Any help in this would be greatly appreciated.
EDIT: I added the following tui-code-snippet file as well, and this only helped me to get the calendar to show/render, but all the functionalities are still missing:
<script src="https://uicdn.toast.com/tui.code-snippet/latest/tui-code-snippet.js"></script>
The code lacks a few js links such as :
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.13/chance.min.js"></script>
Once these links are attached, we simply need to create a tui.calendar instance and then post the custom options as required. An example of such can be:
<script type="text/javascript">
var cal, resizeThrottled;
var useCreationPopup = true;
var useDetailPopup = true;
var datePicker, selectedCalendar;
cal = new tui.Calendar('#calendar', {
defaultView: 'week',
useCreationPopup: useCreationPopup,
useDetailPopup: useDetailPopup,
calendars: CalendarList,
template: {
milestone: function(model) {
return '<span class="calendar-font-icon ic-milestone-b"></span> <span style="background-color: ' + model.bgColor + '">' + model.title + '</span>';
},
allday: function(schedule) {
return getTimeTemplate(schedule, true);
},
time: function(schedule) {
return getTimeTemplate(schedule, false);
}
}
});
</script>
and it should load the calendar just fine, and allow adding events to the scheduler.
I hope this helps anyone else stuck in a similar problem.
Related
I'm trying to integrate pickadate.js on my project but unfortunately after reading the documentation, I'm having difficulty on how I can disable a specific time
$(function() {
let $timePicker = $('input').pickatime()
let timePicker = $timePicker.pickatime('picker')
timePicker.set('disable', new Date(2021,5,22,9))
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/themes/classic.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/themes/classic.time.css" rel="stylesheet"/>
<input type="time">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/picker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/picker.date.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/picker.time.js"></script>
. Please see my code below.
hello refer to this you can use arrays formatted [Hours,Minutes] but the problem within your code is that you didnt pass an array as second param to the timepicker set() method . look at the snippet below i edited yours
timePicker.set('disable', [
// Using a collection of arrays formatted as [HOUR,MINUTES]
[2,30], [4,30], [9,0],
// Using JavaScript Date objects
new Date(2015,9,13,6), new Date(2015,9,13,12,30)
])
picker.set('enable', [
[4,30], [6,0],
new Date(2015,9,13,9)
])
$(function() {
let $timePicker = $('input').pickatime()
let timePicker = $timePicker.pickatime('picker')
timePicker.set('disable', [new Date(2021,5,22,9)])
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/themes/classic.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/themes/classic.time.css" rel="stylesheet"/>
<input type="time">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/picker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/picker.date.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/picker.time.js"></script>
I am creating an O365 app and I have 2 .aspx files, when the user clicks on the O365 mail app, I want each of these pages to be loaded based on the subject of the mail.
Scenario 1: Mail subject contains '#'
result: load page1
Scenario 2: Mail subject does not contain '#'
result: load page2
I have tried having an intermediate .js file where I have written the logic,
but when I do window.location = "path_to_aspx_file",
only the html is loaded but the js files do not run.
My current implementation:
I have LandingLogic.js
(function () {
"use strict";
//The Office initialize function must be run each time a new page is loaded
Office.initialize = function (reason) {
$(document).ready(function () {
var item = Office.cast.item.toItemRead(Office.context.mailbox.item);
var sub = item.subject;
if (sub.indexOf("some text") > -1) {
window.location = "http://localhost:51776/File1.aspx";
}
else {
window.location = "http://localhost:51776/File2.aspx";
}
});
};
})();
After a bit of fumbling around.
I am able to navigate to each of these files now, but I am not sure how to access the mail subject from File1.aspx and File2.aspx.
Did you initialize the Office context before you using Office JavaScript API to get the subject? To redirect the HTML page easily, we can include the JavaScript like below:
Home.js:
/// <reference path="../App.js" />
(function () {
"use strict";
// The Office initialize function must be run each time a new page is loaded
Office.initialize = function (reason) {
$(document).ready(function () {
app.initialize();
RedirectHTMLPage();
});
};
function RedirectHTMLPage() {
var subject = Office.context.mailbox.item.subject;
if (subject.indexOf("#") != -1) {
window.location.href = "https://localhost:44300/page1.aspx";
} else {
window.location.href = "https://localhost:44300/page2.aspx";
}
}
})();
The HTML page for redirecting:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
<script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<link href="../../Content/Office.css" rel="stylesheet" type="text/css" />
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<!-- To enable offline debugging using a local reference to Office.js, use: -->
<!-- <script src="../../Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script> -->
<!-- <script src="../../Scripts/Office/1/office.js" type="text/javascript"></script> -->
<link href="../App.css" rel="stylesheet" type="text/css" />
<script src="../App.js" type="text/javascript"></script>
<link href="Home.css" rel="stylesheet" type="text/css" />
<script src="Home.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
I have tried having an intermediate .js file where I have written the logic, but when I do window.load = "path_to_aspx_file", only the html is loaded but the js files do not run.
Would you mind sharing the detail you using the “window.load”?
Fei Xue answer is correct . if you want to get subject from file2.aspx , add office.js reference and access subject same as file1.aspx inside the Office.initialize event
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
So I'm trying to make a custom BBCode for my forum that will properly color coding by it's language. It works great but it's appearing completely inline and doesn't line break at all like it should.
Here is the coding:
<head>
<link rel="stylesheet" type="text/css" href="http://z3.ifrm.com/63/1/0/p509771/prism.css" />
<body>
<script type="text/javascript">
function addLang(nClass, nName) {
$('blockquote dt:contains(' + nClass + ')').parents('blockquote').find('code').addClass('language-' + nClass);
$('blockquote dt:contains(' + nClass + ')').text('Code: ' + nName);
}
addLang('css', 'CSS');
addLang('javascript', 'JavaScript');
addLang('php', 'PHP');
addLang('sql', 'SQL');
addLang('c++', 'C++');
addLang('c#', 'C#');
addLang('python', 'Python');
addLang('java', 'Java');
</script>
<script type="text/javascript" src="http://z3.ifrm.com/63/1/0/p509772/prism.js"></script>
Here is how it appears: http://i.imgur.com/I67HO7I.png
Here is an example of how I want it to appear: http://i.imgur.com/7kjlrxD.png
I want to put a tag system. I choose http://aehlke.github.io/tag-it/.
I have the code:
var availableTags = [
{
value: 1, label: 'tag1'
},
{
value: 2, label: 'tag2'
},
{
value: 3, label: 'tag3'
}];
$(document).ready(function() {
var version = $.ui ? $.ui.version || "pre 1.6" : 'jQuery-UI not detected';
alert(version);
$("#myTags").tagit({
tagSource: availableTags,
autocomplete: {
delay: 0,
minLength: 2,
source : availableTags
}
});
});
In jsfiddle it work (http://jsfiddle.net/jg9qw/) but in my website it doesn't. The version var is set with "1.8.12".
I have no error in my website console log.
I can put/delete tag but the autocomplete doesn't work.
Css (from header)
<link href="/css/jquery.fancybox.css" rel="stylesheet" type="text/css" media="all" />
<link href="/css/jquery.tagit.css" rel="stylesheet" type="text/css" media="all" />
<link href="/css/tagit.ui-zendesk.css" rel="stylesheet" type="text/css" media="all" />
<link href="/css/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
Js (from header)
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="/js/tag-it.js"></script>
This is not much information you gave, but one thing I can think of with this much information is that probably the order of the scripts are reverse. If you could show us a code from your website's header it would help in solving your problem. (just the scripts you links)
Yes, probably that's the case. Check their website for the correct order: https://github.com/aehlke/tag-it/blob/master/README.markdown
And I don't think that everything is necessary.
And in your jquery ui make sure that the followings are contained: Core, Widget, Position, and Autocomplete
Try it with just the full jquery ui (just link the original one so you don't have to download) and the tag-it, nothing else. In case it doesn't work that way than something else is the source of the problem.
I have a site using javascript popup effect like this:
<script type="text/javascript">
var GB_ROOT_DIR = "greybox/";
</script>
<script src="greybox/AJS.js" type="text/javascript"></script>
<script src="greybox/AJS_fx.js" type="text/javascript"></script>
<script src="greybox/gb_scripts.js" type="text/javascript"></script>
<link href="greybox/gb_styles.css" type="text/css" rel="stylesheet">
<script language="JAVASCRIPT">
function loadWindow(){
GB_showCenter('Free Report!', 'http://www.signupformlocation.com/popup/signup.php', 420, 570);
}
window.onload = loadWindow;
</script>
But everytime my visitor go to the homepage, my popup always shown. How to do making this popup only display one time?
Please Help me
you can use cookies and jquery
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script>
function loadWindow() {
if ($.cookie('popup_flag') != 'true') {
GB_showCenter('Free Report!', 'http://www.signupformlocation.com/popup/signup.php', 420, 570);
$.cookie('popup_flag', 'true');
}
}
</script>
Personally i would go with JStorage, its a HTML5 jQuery Plug-in the uses the local storage on most popular browsers.
Example:
var loadWindows = function()
{
if(!$.jSotreage.get('welcome_flag'))
{
GB_ShowCentre('Free Support!') // Blah
$.jStorage.set('welcome_flag',true);
}
}
Uses JSON To serialize all data in the local storage:-
jStorage: http://plugins.jquery.com/project/jStorage
Draft: http://dev.w3.org/html5/webstorage/
Without jQuery: Storing Objects in HTML5 localStorage
You can store around 5MB Per domain so this would be benificial and should take over the use of cookies within the javascript environment.