I'm currently working on Full Calendar, and I was wondering if someone could help me out. So far I have a calendar that allows the user to select days. Once clicked, particular days change color.
My goal is to add check marks to the days that have been clicked. Does anyone know how this could be achieved?
Attached is the code I have thus far. Thanks a ton :D
enter image description here
This is set up to use a unicode checkmark but also includes comments for changing to use font-awesome if you like
$('#calendar').fullCalendar({
/* Add i tag to all day cells as placeholder for checkmark */
dayRender: function(date, cell) {
var check = document.createElement('i');
check.classList.add('checkbox');
cell.append(check);
},
dayClick: function(date, jsEvent, view) {
var check = $(this).find('i.checkbox'); /* find the i.checkbox */
/* Simpler than the below but if you need to do other things, if/else better approach */
check.toggleClass('marked');
/* if (check.hasClass('marked')) { // font-awesome: fa-check
check.removeClass("marked"); // font-awesome: fa fa-check
} else {
check.addClass("marked"); // font-awesome: fa fa-check
} */
},
events: [{
start: moment().format('YYYY-MM-DD'),
end: moment().add(1, 'day').format('YYYY-MM-DD'),
title: 'Event 1'
}, {
start: moment().add(1, 'day').format('YYYY-MM-DD'),
end: moment().add(3, 'day').format('YYYY-MM-DD'),
title: 'Event 2'
}, ]
});
i.checkbox.marked::before {
content: '\2713';
/* unicode check mark */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.0/fullcalendar.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.0/fullcalendar.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div id='calendar'>
</div>
Related
I have a v-autocomplete and I want to have multiple chips, that's easy by adding the multiple prop.
But I want to have multiple chips with the same name and value. I haven't been able to find a solution for that.
Here is my code:
<v-autocomplete
filled
chips
multiple
v-model="selectedRooms"
:items="roomChoices"
hide-no-data
hide-selected
label="Select Rooms"
placeholder="Select from the available choices"
prepend-icon="mdi-bed"
clearable
deletable-chips
>
</v-autocomplete>
data: () => ({
property_name: null,
dialog_active: false,
roomChoices: ['bedroom', 'kitchen', 'bathroom', 'living-room'],
values: [],
}),
It is not possible to select the same value items in Vuetify's Autocomplete because if we can select the same value items twice then there is no way for Vuetify to detect which item has been selected and which item to remove when requested.
Now, This is where the requirement comes in that "Each item should have a unique identifier for Vuetify to know which item has been selected/removed."
However, if you want to select the same items with the same property twice (which makes less sense though), you can create that item twice in your data array but give each same item a unique identifier (let's say an id). Also, use the return-object prop to know which item among the same items has been selected.
Below is the demo where I created an array of objects data structure where some items have the same title but a unique id and I also used a return object prop to store the selected item's whole object instead of the title only.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<v-app>
<div class="mb-2">Selected items- {{ selectedRooms }}</div>
<v-autocomplete
filled
chips
multiple
v-model="selectedRooms"
:items="roomChoices"
item-text="title"
item-value="id"
hide-no-data
label="Select Rooms"
deletable-chips
clerable
return-object
></v-autocomplete>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
property_name: null,
selectedRooms: [],
values: [],
dialog_active: false,
roomChoices: [
{ title: "bedroom", id: 1 },
{ title: "bedroom", id: 2 },
{ title: "kitchen", id: 3 },
{ title: "kitchen", id: 4 },
{ title: "bathroom", id: 5 },
{ title: "living-room", id: 6 }
],
}
},
})
</script>
</body>
</html>
I'm new to ReactJS and I fell I'm missing some fundamental information.
I am working on simple TODO list, where you click on <li> and it gets transfered to Finished section.
http://jsbin.com/gadavifayo/1/edit?html,js,output
I have 2 arrays that contain list of tasks, when you click on one task <li> it is removed from array and transferred to other array. After that clicked <ul> is updated but not the one where task went.
When using it you may notice that <ul> is updated only when clicked.
How can I update both <ul> when clicking on only one?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing</title>
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div id="react-app"></div>
<script src="https://fb.me/react-0.14.3.js"></script>
<script src="https://fb.me/react-dom-0.14.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel">
/*
* Components
*/
var pendingItems = [
'Clean the room',
'Get milf',
'Sellout and stuff'
];
var finishedItems = [
'Clean the room',
];
var TodoList = React.createClass({
getInitialState: function() {
return { items: this.props.list };
},
handleClick: function(i) {
console.log('You clicked: ' + i + ':' + this.props.listString);
if (this.props.listString == "pendingItems") {
var removed = this.state.items.splice(i, 1);
finishedItems.push(removed);
};
if (this.props.listString == "finishedItems") {
var removed = this.state.items.splice(i, 1);
pendingItems.push(removed);
};
this.forceUpdate()
},
render: function() {
return (
<ul>
{this.state.items.map(function(item, i) {
return (
<li onClick={this.handleClick.bind(this, i)} key={i}>{this.state.items[i]}</li>
);
}, this)}
</ul>
);
},
});
var Layout = React.createClass({
render: function (){
return (
<div className='col-xs-12'>
<div className='col-xs-6'>
<TodoList list={pendingItems} listString="pendingItems"/>
</div>
<div className='col-xs-6'>
<TodoList list={finishedItems} listString="finishedItems"/>
</div>
<div className='col-xs-6'></div>
</div>
)
}
});
ReactDOM.render(<Layout />, document.getElementById('react-app'));
</script>
</body>
</html>
You need to use the states. In getInitialState you put your two list, onclick do whatever transformationyou want (you then have for example updated_list1 and updated_list2 and then you set the list like that:
this.setState({ list1: updated_list1, list2: updated_list2 }); in your case this.setState({ pendingItems: pendingItems ... after the .push
the setState function will automatically rerender, no need to call forceupdate.
The second thing important here is that you have to make the two list communication kinda, so my advise would be to put your both ul in the same component (so you can manage the lists in the same component state as mentionned above).
However this is not the only way to go and you may choose the put the states of your two list in the parent component (Layout). In this case you should use this way to go. https://facebook.github.io/react/tips/expose-component-functions.html
In any case you need (if you want to keep it simple and without external model management like backbone or flux pattern) to put lists states in the same component state. (reminder: method 1 => ul in the same componenet so the states too, method 2 => keep state in the parent component)
I've a paper-dropdown-menu element. How can I show a different selected label, than valueattr is targeting at?
<link rel="import" href="components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="components/paper-item/paper-item.html">
<polymer-element name="my-dropdown-element" attributes="selectedModus">
<template>
<paper-dropdown-menu label="Modus" on-core-select="{{modusSelect}}">
<paper-dropdown class="dropdown">
<core-menu class="menu" selected="{{selectedModus}}" valueattr="val">
<template repeat="{{d in data}}">
<paper-item val="{{d.val}}">{{d.text}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</template>
<script>
Polymer('my-dropdown-element', {
data: [],
ready: function() {
this.data = [];
var entry = {
val: 0,
text: 'Aus'
};
this.data.push(entry);
entry = {
val: 1,
text: 'Ein'
};
this.data.push(entry);
entry = {
val: 2,
text: 'Auto'
};
this.data.push(entry);
entry = {
val: 3,
text: 'Auto (Absenken)'
};
this.data.push(entry);
}
});
</script>
</polymer-element>
When I set selectedModus = 2, the highlighted Item in the opened dropdown is auto. This is correct. But in the dropdown label there is always 0, 1, 2, 3 and not the text representation of the dropdown.
Please help me
Thanks.
edit:
I've deleted all Polymer components from my project. Then I've updated all dependencies via bower from the master's branch of each component.
Now the correct label is showing in the closed dropdown. But clicking on the arrows, doesn't open the drop down menu. I'm getting an error in the timinig-utilities.js which can be traced back to paper-dropdown-transistion.html line 152.
Very strange.
Ok i've found the answer to my problem. It seems to be a bug in the current core-animation\web-animations.html. The change mentioned here
https://github.com/zenorocha/core-animation/commit/0d047ce11e5e6b25c02f1d89b2e7aa53588d7316 worked for me.
in my website, I have a singn_up-form and use the Google-Api to give the user some suggestions. The API requests the location of the user once in Internet-Explorer. But if I try Firefox, the requests are looped until I click "Standort immer Freigeben" - it means "always accept".
function initialize() {
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),
{ types: ['geocode'] });
}
The code is loaded at document.ready and contains more code, but this snippet also reproduces the error.
Does anyone has some ideas?
Try this :
put the apis in your <head></head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=places"></script>
put this in your body tag:
<label for="autocomplete">Please Insert an address:</label>
<br>
<input id="autocomplete" type="text" size="100">
put this in your onload function:
var input = document.getElementById('autocomplete');
new google.maps.places.Autocomplete(input);
this is my code :
var input = document.getElementById('autocomplete');
new google.maps.places.Autocomplete(input);
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=places"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<label for="autocomplete">Please Insert an address:</label><br>
<input id="autocomplete" type="text" size="100">
</body>
</html>
You might have kept some onfocus attribute as given in Google Maps API Example
<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
OR
If you don't require keeping bounds for places suggestions, you may want to remove it
OR
If you need to set bounds for suggestions keep some condition to not call location consent every time, if user gives permission.
Please keep your condition in geolocate() function
Issue is happening only in Mozilla FireFox
What you want to do is this:
function handlePermission() {
navigator.permissions.query({name:'geolocation'}).then(function(result) {
if (result.state == 'granted') {
geoBtn.style.display = 'none';
} else if (result.state == 'prompt') {
geoBtn.style.display = 'none';
navigator.geolocation.getCurrentPosition(revealPosition,positionDenied,geoSettings);
} else if (result.state == 'denied') {
geoBtn.style.display = 'inline';
}
});
}
then put handlePermission(); after your callback function receives permission
I have a textbox in a form and I want to use MathJax.I have downloaded it, but don't know how to use it.
I am using ASP-MVC3.
Thanks for your helps.
I found the issue.Its just needed to load js files from mathjax.org and add these lines to the head tag.
<script type="text/javascript">
$(document).ready(function () {
MathJax.Hub.Config({ TeX: { equationNumbers: { autoNumber: "all" } } });
});
</script>
<script src="~/Scripts/MathJax.js?config=Tex-AMS_HTML"></script>
And now its just needed to add the characters $$ and \\ to the text in the following form and append it to something like a div.
jQuery("#radikal").on('click', function () {
var x="$$\\sqrt[3]{8}$$";
$("#formul").append(x);
});
<input type="button" id="radikal"/>
<div id="formul"></div>
And now we will have a radical in div#radikal.
Thats all.