CODEWITHSUNDEEP
javascriptjqueryfullcalendar
Gerardo
Gerardo

Reputation: 369

Get selected value to add event fullCalendar

I have something similar of this full calendar, as you can see you can create event writing into input and click on button.

instead of that I have a select where I want to create event with selected value, is there posible?

HTML: 

<select id="lstRegion" class="form-control select2 select2-accessible agenda_space" aria-hidden="true"></select>
<a href="javascript:;" id="event_add" class="btn green"> Add Event </a> </div>                   
<div id="event_box" class="margin-bottom-10"></div>

JS:

 //load region dropdown
        $("#lstRegion")
                .getJSONCatalog({
                    onSuccess: function (response) {
                        console.log(response);
                    },
                    url: '/Agenda/GetRegion',
                    valueProperty: "ID",
                    textProperty: "valor"
                });

 //Event logic
var initDrag = function (el) {
    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
    // it doesn't need to have a start or end
    var eventObject = {
        title: $.trim(el.text()) // use the element's text as the event title
    };
    // store the Event Object in the DOM element so we can get to it later
    el.data('eventObject', eventObject);
    // make the event draggable using jQuery UI
    el.draggable({
        zIndex: 999,
        revert: true, // will cause the event to go back to its
        revertDuration: 0 //  original position after the drag
    });
};
var addEvent = function (title) {
    title = title.length === 0 ? "Untitled Event" : title;
    var html = $('<div class="external-event label label-default">' + title + '</div>');
    jQuery('#event_box').append(html);
    initDrag(html);
};

$('#external-events div.external-event').each(function () {
    initDrag($(this));
});

$('#event_add').unbind('click').click(function () {
    var title = $('#event_title').val();
    addEvent(title);
});

Upvotes: 0

Views: 1215

Answers (1)

Twisty
Twisty

Reputation: 30893

If you have code like:

<select id="lstRegion" class="form-control select2 select2-accessible agenda_space" aria-hidden="true">
  <option>Appointment</option>
  <option>All Day Event</option>
  <option>Meeting</option>
</select>

You will want to use:

$('#event_add').unbind('click').click(function () {
  var title = $('#lstRegion option:selected').html();
  addEvent(title);
});

This will select the currently selected option from <select> and then read the innerHTML of the <option>.

Upvotes: 1

Related Questions