Mixing
Add jQuery slidetoggle to an event on clicking of an event in day list view of fullcalendar
I'm trying to customise the full calendar for the following.
I need to add collapsing panel or jquery slidetoggle to an event on day list view of fullcalnedar. On clicking on an event it should slide down or up a panel, this panel will some information regarding that Event. As of now list view collapsing is not available with full calendar library.
Any one have idea, how to do this?
Here is my project link:-
https://github.com/mahi007rocks/custom_calendar
Here is code, i have done so far
index.html.erb
I have gone through full calendar documentation, there list view collapsing is not available and bit googling also not helpful
<div id='calendar'></div>
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,agendaWeek'
},
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: { buttonText: 'list day' },
listWeek: { buttonText: 'list week' }
},
defaultView: 'listDay',
defaultDate: '2019-01-02',
navLinks: true, // can click day/week names to navigate views
editable: true,
events: [
<% @data.each do |f| %>
{
title: '<%= f[:name]%>',
start: '<%= f[:start_time] %>',
end: ' <%= f[:end_time] %>',
description: 'first description',
addStar: "star",
addNote: "Notes"
},
<% end %>
],
eventRender: function(event, element) {
element.find('.fc-list-item-title').append("
<br/>Slide toggle text should come here" + event.description);
}
});
});
</script>
When i click on any event in day list view, the event should slide down and should show the text "Slide toggle text should come here".
But with current implementation i was not able complete this.
Any help would be appreciated.
javascript ruby-on-rails fullcalendar
asked Jan 2 at 22:07
Rust GoldRust Gold
34
add a comment |
I'm trying to customise the full calendar for the following.
I need to add collapsing panel or jquery slidetoggle to an event on day list view of fullcalnedar. On clicking on an event it should slide down or up a panel, this panel will some information regarding that Event. As of now list view collapsing is not available with full calendar library.
Any one have idea, how to do this?
Here is my project link:-
https://github.com/mahi007rocks/custom_calendar
Here is code, i have done so far
index.html.erb
I have gone through full calendar documentation, there list view collapsing is not available and bit googling also not helpful
<div id='calendar'></div>
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,agendaWeek'
},
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: { buttonText: 'list day' },
listWeek: { buttonText: 'list week' }
},
defaultView: 'listDay',
defaultDate: '2019-01-02',
navLinks: true, // can click day/week names to navigate views
editable: true,
events: [
<% @data.each do |f| %>
{
title: '<%= f[:name]%>',
start: '<%= f[:start_time] %>',
end: ' <%= f[:end_time] %>',
description: 'first description',
addStar: "star",
addNote: "Notes"
},
<% end %>
],
eventRender: function(event, element) {
element.find('.fc-list-item-title').append("
<br/>Slide toggle text should come here" + event.description);
}
});
});
</script>
When i click on any event in day list view, the event should slide down and should show the text "Slide toggle text should come here".
But with current implementation i was not able complete this.
Any help would be appreciated.
javascript ruby-on-rails fullcalendar
asked Jan 2 at 22:07
Rust GoldRust Gold
34
add a comment |
I'm trying to customise the full calendar for the following.
I need to add collapsing panel or jquery slidetoggle to an event on day list view of fullcalnedar. On clicking on an event it should slide down or up a panel, this panel will some information regarding that Event. As of now list view collapsing is not available with full calendar library.
Any one have idea, how to do this?
Here is my project link:-
https://github.com/mahi007rocks/custom_calendar
Here is code, i have done so far
index.html.erb
I have gone through full calendar documentation, there list view collapsing is not available and bit googling also not helpful
<div id='calendar'></div>
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,agendaWeek'
},
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: { buttonText: 'list day' },
listWeek: { buttonText: 'list week' }
},
defaultView: 'listDay',
defaultDate: '2019-01-02',
navLinks: true, // can click day/week names to navigate views
editable: true,
events: [
<% @data.each do |f| %>
{
title: '<%= f[:name]%>',
start: '<%= f[:start_time] %>',
end: ' <%= f[:end_time] %>',
description: 'first description',
addStar: "star",
addNote: "Notes"
},
<% end %>
],
eventRender: function(event, element) {
element.find('.fc-list-item-title').append("
<br/>Slide toggle text should come here" + event.description);
}
});
});
</script>
When i click on any event in day list view, the event should slide down and should show the text "Slide toggle text should come here".
But with current implementation i was not able complete this.
Any help would be appreciated.
javascript ruby-on-rails fullcalendar
asked Jan 2 at 22:07
Rust GoldRust Gold
34
I'm trying to customise the full calendar for the following.
I need to add collapsing panel or jquery slidetoggle to an event on day list view of fullcalnedar. On clicking on an event it should slide down or up a panel, this panel will some information regarding that Event. As of now list view collapsing is not available with full calendar library.
Any one have idea, how to do this?
Here is my project link:-
https://github.com/mahi007rocks/custom_calendar
Here is code, i have done so far
index.html.erb
I have gone through full calendar documentation, there list view collapsing is not available and bit googling also not helpful
<div id='calendar'></div>
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,agendaWeek'
},
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: { buttonText: 'list day' },
listWeek: { buttonText: 'list week' }
},
defaultView: 'listDay',
defaultDate: '2019-01-02',
navLinks: true, // can click day/week names to navigate views
editable: true,
events: [
<% @data.each do |f| %>
{
title: '<%= f[:name]%>',
start: '<%= f[:start_time] %>',
end: ' <%= f[:end_time] %>',
description: 'first description',
addStar: "star",
addNote: "Notes"
},
<% end %>
],
eventRender: function(event, element) {
element.find('.fc-list-item-title').append("
<br/>Slide toggle text should come here" + event.description);
}
});
});
</script>
When i click on any event in day list view, the event should slide down and should show the text "Slide toggle text should come here".
But with current implementation i was not able complete this.
Any help would be appreciated.
javascript ruby-on-rails fullcalendar
javascript ruby-on-rails fullcalendar
asked Jan 2 at 22:07
Rust GoldRust Gold
34
asked Jan 2 at 22:07
Rust GoldRust Gold
34
asked Jan 2 at 22:07
Rust GoldRust Gold
34
asked Jan 2 at 22:07
Rust GoldRust Gold
34
asked Jan 2 at 22:07
Rust GoldRust Gold
34
34
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I'm able to achieve this somehow without jquery slide toggle.
This is developed only for list-day-view of fullcalendar.
In script file event Click is there. On click of ".fc-list-item" class, we're binding ".cat" class to fc-list-item with some height. This gives a feel of slide toggle .
On click of any event in list-day-view , it'll slide down and if you click again it'll slide up.
index.html.erb
<div id='calendar'></div>
<style>
.cat{
height: 50px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,agendaWeek'
},
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: { buttonText: 'list day' },
listWeek: { buttonText: 'list week' }
},
defaultView: 'listDay',
defaultDate: '2019-01-03',
navLinks: true, // can click day/week names to navigate views
editable: true,
events: [
<% @data.each do |f| %>
{
title: '<%= f[:name]%>',
start: '<%= f[:start_time] %>',
end: ' <%= f[:end_time] %>',
description: 'first description',
addStar: "Add or remove",
addNote: "Edit event notes",
bell: "Notification settings",
},
<% end %>
],
eventRender: function(event, element) {
var color = element.find('.session-color')
var bell = element.find('.bell-icon')
var notes = element.find('.notes-icon')
var slide = element.find('.slide-down')
color.prepend("<i class='fa fa-star'></i>");
bell.prepend("<i class='fa fa-bell'></i>");
notes.prepend("<i class='fa fa-sticky-note'></i>");
slide.prepend("<i class='fa fa-angle-down fa-2x'></i>");
// element[0].title = "This is your name";
// element[0].addNote = "Please add note"
},
eventClick: function(event,calEvent, jsEvent, view) {
$(".bell-icon").click(function(){
alert("bell here");
})
$(".fc-list-item").click(function(event, calEvent, jsEvent, view){
var first_name = this.nextElementSibling
if ( !first_name || first_name.className == "fc-list-item"){
var slot_time = $(this)[0].querySelector(".fc-list-item-time").innerHTML
// var star = $(this)[0].querySelector(".custom-class").innerHTML;
var name = $(this)[0].childNodes[5].querySelector('a').innerHTML;
$(this).after('<div class="cat"></div>');
$(this).after('<div class="mat"></div>');
$('.cat').append(slot_time);
$('.mat').append(name);
}
else{
$('.cat').remove();
$('.mat').remove();
}
});
}
});
});
</script>
answered Jan 9 at 9:33
Rust GoldRust Gold
34
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54013810%2fadd-jquery-slidetoggle-to-an-event-on-clicking-of-an-event-in-day-list-view-of-f%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I'm able to achieve this somehow without jquery slide toggle.
This is developed only for list-day-view of fullcalendar.
In script file event Click is there. On click of ".fc-list-item" class, we're binding ".cat" class to fc-list-item with some height. This gives a feel of slide toggle .
On click of any event in list-day-view , it'll slide down and if you click again it'll slide up.
index.html.erb
<div id='calendar'></div>
<style>
.cat{
height: 50px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,agendaWeek'
},
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: { buttonText: 'list day' },
listWeek: { buttonText: 'list week' }
},
defaultView: 'listDay',
defaultDate: '2019-01-03',
navLinks: true, // can click day/week names to navigate views
editable: true,
events: [
<% @data.each do |f| %>
{
title: '<%= f[:name]%>',
start: '<%= f[:start_time] %>',
end: ' <%= f[:end_time] %>',
description: 'first description',
addStar: "Add or remove",
addNote: "Edit event notes",
bell: "Notification settings",
},
<% end %>
],
eventRender: function(event, element) {
var color = element.find('.session-color')
var bell = element.find('.bell-icon')
var notes = element.find('.notes-icon')
var slide = element.find('.slide-down')
color.prepend("<i class='fa fa-star'></i>");
bell.prepend("<i class='fa fa-bell'></i>");
notes.prepend("<i class='fa fa-sticky-note'></i>");
slide.prepend("<i class='fa fa-angle-down fa-2x'></i>");
// element[0].title = "This is your name";
// element[0].addNote = "Please add note"
},
eventClick: function(event,calEvent, jsEvent, view) {
$(".bell-icon").click(function(){
alert("bell here");
})
$(".fc-list-item").click(function(event, calEvent, jsEvent, view){
var first_name = this.nextElementSibling
if ( !first_name || first_name.className == "fc-list-item"){
var slot_time = $(this)[0].querySelector(".fc-list-item-time").innerHTML
// var star = $(this)[0].querySelector(".custom-class").innerHTML;
var name = $(this)[0].childNodes[5].querySelector('a').innerHTML;
$(this).after('<div class="cat"></div>');
$(this).after('<div class="mat"></div>');
$('.cat').append(slot_time);
$('.mat').append(name);
}
else{
$('.cat').remove();
$('.mat').remove();
}
});
}
});
});
</script>
answered Jan 9 at 9:33
Rust GoldRust Gold
34
add a comment |
I'm able to achieve this somehow without jquery slide toggle.
This is developed only for list-day-view of fullcalendar.
In script file event Click is there. On click of ".fc-list-item" class, we're binding ".cat" class to fc-list-item with some height. This gives a feel of slide toggle .
On click of any event in list-day-view , it'll slide down and if you click again it'll slide up.
index.html.erb
<div id='calendar'></div>
<style>
.cat{
height: 50px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,agendaWeek'
},
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: { buttonText: 'list day' },
listWeek: { buttonText: 'list week' }
},
defaultView: 'listDay',
defaultDate: '2019-01-03',
navLinks: true, // can click day/week names to navigate views
editable: true,
events: [
<% @data.each do |f| %>
{
title: '<%= f[:name]%>',
start: '<%= f[:start_time] %>',
end: ' <%= f[:end_time] %>',
description: 'first description',
addStar: "Add or remove",
addNote: "Edit event notes",
bell: "Notification settings",
},
<% end %>
],
eventRender: function(event, element) {
var color = element.find('.session-color')
var bell = element.find('.bell-icon')
var notes = element.find('.notes-icon')
var slide = element.find('.slide-down')
color.prepend("<i class='fa fa-star'></i>");
bell.prepend("<i class='fa fa-bell'></i>");
notes.prepend("<i class='fa fa-sticky-note'></i>");
slide.prepend("<i class='fa fa-angle-down fa-2x'></i>");
// element[0].title = "This is your name";
// element[0].addNote = "Please add note"
},
eventClick: function(event,calEvent, jsEvent, view) {
$(".bell-icon").click(function(){
alert("bell here");
})
$(".fc-list-item").click(function(event, calEvent, jsEvent, view){
var first_name = this.nextElementSibling
if ( !first_name || first_name.className == "fc-list-item"){
var slot_time = $(this)[0].querySelector(".fc-list-item-time").innerHTML
// var star = $(this)[0].querySelector(".custom-class").innerHTML;
var name = $(this)[0].childNodes[5].querySelector('a').innerHTML;
$(this).after('<div class="cat"></div>');
$(this).after('<div class="mat"></div>');
$('.cat').append(slot_time);
$('.mat').append(name);
}
else{
$('.cat').remove();
$('.mat').remove();
}
});
}
});
});
</script>
answered Jan 9 at 9:33
Rust GoldRust Gold
34
add a comment |
I'm able to achieve this somehow without jquery slide toggle.
This is developed only for list-day-view of fullcalendar.
In script file event Click is there. On click of ".fc-list-item" class, we're binding ".cat" class to fc-list-item with some height. This gives a feel of slide toggle .
On click of any event in list-day-view , it'll slide down and if you click again it'll slide up.
index.html.erb
<div id='calendar'></div>
<style>
.cat{
height: 50px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,agendaWeek'
},
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: { buttonText: 'list day' },
listWeek: { buttonText: 'list week' }
},
defaultView: 'listDay',
defaultDate: '2019-01-03',
navLinks: true, // can click day/week names to navigate views
editable: true,
events: [
<% @data.each do |f| %>
{
title: '<%= f[:name]%>',
start: '<%= f[:start_time] %>',
end: ' <%= f[:end_time] %>',
description: 'first description',
addStar: "Add or remove",
addNote: "Edit event notes",
bell: "Notification settings",
},
<% end %>
],
eventRender: function(event, element) {
var color = element.find('.session-color')
var bell = element.find('.bell-icon')
var notes = element.find('.notes-icon')
var slide = element.find('.slide-down')
color.prepend("<i class='fa fa-star'></i>");
bell.prepend("<i class='fa fa-bell'></i>");
notes.prepend("<i class='fa fa-sticky-note'></i>");
slide.prepend("<i class='fa fa-angle-down fa-2x'></i>");
// element[0].title = "This is your name";
// element[0].addNote = "Please add note"
},
eventClick: function(event,calEvent, jsEvent, view) {
$(".bell-icon").click(function(){
alert("bell here");
})
$(".fc-list-item").click(function(event, calEvent, jsEvent, view){
var first_name = this.nextElementSibling
if ( !first_name || first_name.className == "fc-list-item"){
var slot_time = $(this)[0].querySelector(".fc-list-item-time").innerHTML
// var star = $(this)[0].querySelector(".custom-class").innerHTML;
var name = $(this)[0].childNodes[5].querySelector('a').innerHTML;
$(this).after('<div class="cat"></div>');
$(this).after('<div class="mat"></div>');
$('.cat').append(slot_time);
$('.mat').append(name);
}
else{
$('.cat').remove();
$('.mat').remove();
}
});
}
});
});
</script>
answered Jan 9 at 9:33
Rust GoldRust Gold
34
I'm able to achieve this somehow without jquery slide toggle.
This is developed only for list-day-view of fullcalendar.
In script file event Click is there. On click of ".fc-list-item" class, we're binding ".cat" class to fc-list-item with some height. This gives a feel of slide toggle .
On click of any event in list-day-view , it'll slide down and if you click again it'll slide up.
index.html.erb
<div id='calendar'></div>
<style>
.cat{
height: 50px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,agendaWeek'
},
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: { buttonText: 'list day' },
listWeek: { buttonText: 'list week' }
},
defaultView: 'listDay',
defaultDate: '2019-01-03',
navLinks: true, // can click day/week names to navigate views
editable: true,
events: [
<% @data.each do |f| %>
{
title: '<%= f[:name]%>',
start: '<%= f[:start_time] %>',
end: ' <%= f[:end_time] %>',
description: 'first description',
addStar: "Add or remove",
addNote: "Edit event notes",
bell: "Notification settings",
},
<% end %>
],
eventRender: function(event, element) {
var color = element.find('.session-color')
var bell = element.find('.bell-icon')
var notes = element.find('.notes-icon')
var slide = element.find('.slide-down')
color.prepend("<i class='fa fa-star'></i>");
bell.prepend("<i class='fa fa-bell'></i>");
notes.prepend("<i class='fa fa-sticky-note'></i>");
slide.prepend("<i class='fa fa-angle-down fa-2x'></i>");
// element[0].title = "This is your name";
// element[0].addNote = "Please add note"
},
eventClick: function(event,calEvent, jsEvent, view) {
$(".bell-icon").click(function(){
alert("bell here");
})
$(".fc-list-item").click(function(event, calEvent, jsEvent, view){
var first_name = this.nextElementSibling
if ( !first_name || first_name.className == "fc-list-item"){
var slot_time = $(this)[0].querySelector(".fc-list-item-time").innerHTML
// var star = $(this)[0].querySelector(".custom-class").innerHTML;
var name = $(this)[0].childNodes[5].querySelector('a').innerHTML;
$(this).after('<div class="cat"></div>');
$(this).after('<div class="mat"></div>');
$('.cat').append(slot_time);
$('.mat').append(name);
}
else{
$('.cat').remove();
$('.mat').remove();
}
});
}
});
});
</script>
answered Jan 9 at 9:33
Rust GoldRust Gold
34
answered Jan 9 at 9:33
Rust GoldRust Gold
34
answered Jan 9 at 9:33
Rust GoldRust Gold
34
answered Jan 9 at 9:33
Rust GoldRust Gold
34
34
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54013810%2fadd-jquery-slidetoggle-to-an-event-on-clicking-of-an-event-in-day-list-view-of-f%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
