<input type="text" id="foo"></input>

var foo = document.getElementById('foo');
var calendar1 = rome(foo);

<div id="result"></div>
<div id="outer"></div>
<a href="#" id="open" class="button button-rounded">Open</a>
&nbsp;
<a href="#" id="close" class="button button-rounded">Close</a>

.selected-day {
    background-color: #FF851B;
    color: #fff;
}

var result = document.getElementById('result');
var outer = document.getElementById('outer');
var close = document.getElementById('close');
var open = document.getElementById('open');
var calendar = rome(outer, {
    'monthFormat': 'YYYY年 MM月',
    "timeInterval": 1200,
    'styles': {
        'selectedDay': 'selected-day'
    }
});
calendar.on('data', function(value){
    result.textContent = value;
})
close.addEventListener('click', function() {
    calendar.hide();
});
open.addEventListener('click', function() {
    calendar.show();
});